StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POupdating model and binding update operations with UI
text
Body
copied!<p>I currently have developed a table of content using AngularJS, the table will populate based on an Angular Service "Model" which invokes a web service and returns list and using ng-repeat and creating a table and all its content. </p> <p>Everything at the moment works fine, I have a minor problem though. Part of the table, we are outputting an action button which when clicked invokes a web service which update the current record. Am trying to make the record data gets updated automatically, but i must refresh the page in order to see the changes. </p> <p>Here is my code </p> <p>My app.js</p> <pre><code>angular.module('my_vehicles', ['vehicleServices', 'AccountsDirectives']); </code></pre> <p>service.js</p> <pre><code>'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} } ); }); </code></pre> <p>controller.js</p> <pre><code>'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'; }); } </code></pre> <p>and finally, my html code</p> <pre><code> <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> </code></pre> <p>P.S the {% ng XXX %} is outputting {{ XXX }}, am using the above syntax because django templating engine does not allow me to use {{}} so i've developed a templatetag that would output {{}} .. </p> <p>As mentioned earlier, my problem is that every time I invoke "mark as sold" it would invoke the cars.update() but it will not update the record displayed, must refresh to see changes. Any idea how i can solve this?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload