使用UI更新模型和綁定更新操作

Question

我目前已經使用AngularJS開發了一個內容表，該表將基於Angular Service「模型」填充，該模型調用Web服務並返回列表並使用ng-repeat並創建一個表及其所有內容。

目前的一切工作正常，但我有一個小問題。在表格的一部分，我們輸出一個操作按鈕，當點擊它時調用一個更新當前記錄的Web服務。我試圖讓記錄數據自動更新，但我必須刷新頁面才能看到更改。

這裏是我的代碼

我app.js

angular.module('my_vehicles', ['vehicleServices', 'AccountsDirectives']); 

service.js

'use strict'; 

angular.module('vehicleServices', ['ngResource']). 
    factory('Car', function($resource) { 
     return $resource('/vehicle/api/car.json/:id', {}, 
      { 
       query: {method:'GET',  isArray:false}, 
       delete: {method:'DELETE', isArray:false}, 
       update: {method:'PUT',  isArray:false} 
      } 
     ); 
}); 

controller.js

'use strict'; 

function MyVehicleController($scope, Car) { 

    var init = function() { 
     $scope.page_has_next = true; 
     $scope.cars = []; 
     $scope.page = 1; 
    }; 

    // initialize values 
    init(); 


    Car.query({my_vehicle: true}, 
     // success 
     function(data) { 
      $scope.page_has_next = data.has_next; 
      $scope.cars = data.objects; 
     }, 
     // error 
     function(data) { 

     } 
    ); 


    $scope.mark_sold = function(id, index) { 
     Car.update({ 
      id  : id, 
      status : 'S' 
     }, 
     function(data) { 

     }); 
    } 

    $scope.delete = function(id, index) { 
     Car.delete(
      {id: id}, 
      // on success 
      function() { 
       // remove the element from cars array and it will be 
       // automatically updated by ng-repeat 
       $scope.cars.splice(index, 1); 
       $scope.loadMore(1); 
      } 
     ); 
    } 

    $scope.is_total_zero = function() { 
     return !!($scope.cars.length) 
     //return $scope.cars.length > 0 ? true : false 
    } 


    $scope.loadMore = function(limit) { 
     if($scope.page_has_next) { 
      $scope.$broadcast('loading_started'); 
      console.log(limit); 
      Car.query({my_vehicle: true, page: $scope.page, limit: limit}, 
       // success 
       function(data) { 
        $scope.page_has_next = data.has_next; 
        $scope.cars = $scope.cars.concat(angular.fromJson(data.objects)); 
        $scope.page++; 
        $scope.$broadcast('loading_ended'); 
       }, 
       // error 
       function() { 
        $scope.page_has_next = false; 
        $scope.$broadcast('loading_ended'); 
       } 
      ); 
     } 
    } 


    $scope.$on('loading_started', function() { 
     $scope.state = 'loading'; 
    }); 

    $scope.$on('loading_ended', function() { 
     $scope.state = 'ready'; 
    }); 


} 

最後，我的html代碼

    <tr ng-repeat="car in cars"> 
         <td><a href="{% ng car.get_absolute_url %}">{% ng car._get_model_display.make_display %} {% ng car._get_model_display.model_display %} {% ng car._get_model_display.trim_display %}</a></td> 
         <td>{% ng car.created_at_format %}</td> 
         <td>{% ng car.view_count %}</td> 
         <td ng-model="car.status_label">{% ng car.status_label %}</td> 
         <td> 
          <div class="btn-group"> 
           <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-model="edit" class="btn btn-mini edit-btn">{% trans 'Edit' %}</button> 
           <button ng-disabled="car.status == 'S'" ng-click="delete(car.id, $index)" class="btn btn-mini delete-btn">{% trans 'Delete' %}</button> 
           <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-click="mark_sold(car.id, $index)" class="btn btn-mini edit-btn">{% trans 'Mark as sold' %}</button> 
          </div> 
          </td> 
         </tr> 

PS {％XXX％}正在輸出{{XXX}}，我使用上面的語法，因爲django模板引擎不允許我使用{{}}，所以我開發了一個templatetag，輸出{{}} ..

如前所述，我的問題是，我每次調用「mark as sold」時都會調用cars.update（），但它不會更新顯示的記錄，必須刷新才能看到變化。任何想法如何我可以解決這個問題？

Answer 1

據我瞭解你的代碼，你只更新數據庫而不更新汽車模型（$ scope.cars），所以更改只反映在數據庫中，但不在AngularJS應用程序中。

也許嘗試以下操作：

$scope.mark_sold = function(id, index) { 
    Car.update({ 
     id  : id, 
     status : 'S' 
    }, 
    function(data) { 
     $scope.cars[id].status = 'S'; 
    }); 
} 

Answer 2

您還需要更新您的內存陣列的汽車。 你已經有數組索引（mark_sold函數的第二個參數）：

$scope.mark_sold = function(id, index) { 
    Car.update({ 
     id  : id, 
     status : 'S' 
    }, 
    function(data) { 
     // Update in-memory array 
     $scope.$apply(function(scope) { 
      scope.cars[index].status = 'S'; 
     }); 

    }); 
}