mise à jour des opérations de mise à jour des modèles et des liaisons avec l'interface utilisateur

J'ai actuellement mis au point un tableau de contenu à l'aide d'AngularJS, le tableau sera rempli basé sur Angulaire de Service "Modèle" qui appelle un service web et retourne la liste et en utilisant ng-repeat et la création d'une table et de tout son contenu.

Tout pour le moment fonctionne très bien, j'ai un problème mineur. Une partie de la table, nous sommes à la sortie d'un bouton d'action qui lorsqu'il est cliqué appelle un service web de mise à jour de l'enregistrement en cours. Suis en train de faire l'enregistrement de données est mise à jour automatiquement, mais je dois actualiser la page pour voir les changements.

Voici mon code

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

et enfin, mon code 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>

P. S {% ng XXX %} est sortie {{ XXX }}, je suis en utilisant la syntaxe ci-dessus, car django moteur de template ne me permet pas d'utiliser {{}} j'ai donc développé un templatetag qui serait sortie de {{}} ..

Comme mentionné plus haut, mon problème est que chaque fois que j'invoque "marquer comme "vendu" invoquer les voitures.mise à jour (), mais il ne sera pas de mise à jour de l'enregistrement affiché, doit actualiser pour voir les changements. Une idée de comment je peux résoudre ce problème?

source d'informationauteur Mo J. Mughrabi