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
Vous devez vous connecter pour publier un commentaire.
Autant je comprends votre code vous ne mettez à jour la db sans mettre à jour les voitures de modèle ($champ d'application.les voitures) si les modifications sont reflétées dans la db mais pas dans l'application AngularJS.
Peut-être essayer le suivant:
Vous devez également mettre à jour votre en mémoire des voitures de tableau.
Vous avez déjà l'index de tableau (deuxième paramètre de la mark_sold fonction):