aktualizowanie modelu i operacji aktualizacji wiązania za pomocą interfejsu użytkownika

Question

Obecnie opracowałem tabelę zawartości przy użyciu AngularJS, tabela zostanie wypełniona na podstawie modelu "Usługa" kątowego, który wywołuje usługę sieci Web i listę zwrotów oraz za pomocą polecenia ng-repeat i utworzenia tabela i cała jej zawartość.

Wszystko w tej chwili działa dobrze, mam jednak niewielki problem. Część tabeli, wyprowadzamy przycisk akcji, który po kliknięciu wywołuje usługę sieciową aktualizującą bieżący rekord. Próbuję zrobić aktualizację danych rekordów automatycznie, ale muszę odświeżyć stronę, aby zobaczyć zmiany.

Oto mój kod

Moi 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'; 
    }); 


} 

i wreszcie mój kod 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 {% ng% XXX} jest wyprowadzanie {{XXX}}, jestem przy użyciu powyższej składni, ponieważ silnik Django szablonów nie pozwala mi korzystać z {{}} więc stworzyliśmy templatetag które output {{}} ..

Jak wspomniano wcześniej, moim problemem jest to, że za każdym razem, gdy wywołuję "mark as sold", wywoływane jest ono cars.update(), ale nie zaktualizuje wyświetlanego rekordu, musi odświeżać, aby zobaczyć zmiany. Każdy pomysł, jak mogę to rozwiązać?

Answer 1

O ile rozumiem twój kod, aktualizujesz tylko bazę danych bez aktualizowania modelu samochodu ($ scope.cars), więc zmiany są odzwierciedlane tylko w db, ale nie w aplikacji AngularJS.

Może spróbuj wykonać następujące czynności:

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

Answer 2

Trzeba również zaktualizować swoją tablicę samochody w pamięci. Masz już indeks tablicy (drugi parametr funkcji 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'; 
     }); 

    }); 
}