html - AngularJS list not updating when changes are made -
i think know why list isn't changing question more "how can in way 2 way binding work?"
i have view:
<div class="table-responsive"> <table class="table table-striped table-light"> <thead> <tr class="uppercase"> <th></th> <th> <a href="" ng-click="controller.predicate = 'name'; controller.reverse = !controller.reverse"> name <span ng-show="controller.predicate == 'name' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'name' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'description'; controller.reverse = !controller.reverse"> description <span ng-show="controller.predicate == 'description' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'description' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'address1'; controller.reverse = !controller.reverse"> address 1 <span ng-show="controller.predicate == 'address1' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'address1' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'address2'; controller.reverse = !controller.reverse"> address 2 <span ng-show="controller.predicate == 'address2' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'address2' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'address3'; controller.reverse = !controller.reverse"> address 3 <span ng-show="controller.predicate == 'address3' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'address3' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'address4'; controller.reverse = !controller.reverse"> address 4 <span ng-show="controller.predicate == 'address4' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'address4' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th> <a href="" ng-click="controller.predicate = 'postcode'; controller.reverse = !controller.reverse"> post code <span ng-show="controller.predicate == 'postcode' && !controller.reverse" class="fa fa-caret-down"></span> <span ng-show="controller.predicate == 'postcode' && controller.reverse" class="fa fa-caret-up"></span> </a> </th> <th class="actions"> </th> </tr> </thead> <tbody> <tr dir-paginate="center in controller.centers.data | orderby: controller.predicate:controller.reverse | filter: controller.filter | itemsperpage : controller.pagesize" ng-click="controller.select($index)"> <td> <label> <input type="checkbox" ng-checked="controller.isselected($index)" /> </label> </td> <td> {{ center.name }} </td> <td> {{ center.description }} </td> <td> {{ center.address1 }} </td> <td> {{ center.address2 }} </td> <td> {{ center.address3 }} </td> <td> {{ center.address4 }} </td> <td> {{ center.postcode }} </td> <td class="actions"> <button class="btn btn-success" ng-click="controller.add($event, $index)" ng-if="!controller.contains(controller.usercenters, center)"> <span class="fa fa-check"></span> </button> <button class="btn btn-danger" ng-click="controller.remove($event, $index)" ng-if="controller.contains(controller.usercenters, center)"> <span class="fa fa-close"></span> </button> </td> </tr> </tbody> </table> </div> <dir-pagination-controls></dir-pagination-controls> (truncated brevity)
now, can see action buttons shown depending on function. function checks centers , sees if part of users centers. if are, remove button shown, if not, add button shown. controller looks this:
.controller('usercenterscontroller', ['$stateparams', 'arrayservice', 'centerservice', 'toastr', 'centers', 'usercenters', function ($stateparams, arrayservice, service, toastr, centers, usercenters) { var self = this; // our user id var userid = $stateparams.userid; // assign our centers self.centers = centers; self.usercenters = usercenters; self.selected = []; // create our page sizes array self.pagesizes = [10, 20, 50, 100]; // filtering , sorting table self.pagesize = self.pagesizes[0]; self.predicate = 'name'; self.reverse = false; self.filter = ''; console.log(centers); // select method self.select = function (index) { // our index var = self.selected.indexof(index); // if our index in our array if (i > -1) { // remove our array self.selected.splice(i, 1); // else, our index not in our array } else { // add our index our array self.selected.push(index); } }; // check see if row selected self.isselected = function (index) { // if our item in our array, return true return (self.selected.indexof(index) > -1); }; // function check if center in array self.contains = function (array, center) { // check see if our center in array return arrayservice.indexof(center) > -1 ? true : false; }; // adds current center users list self.add = function (e, index) { // stop propagation e.stoppropagation(); console.log(index); // if have index if (typeof index !== 'undefined') { // our center var center = self.centers.data[index]; console.log(center); // make our call //var save = service.addtouser(center, userid); // push our user centers if it's not there arrayservice.modify(self.usercenters.data, center); console.log(self.usercenters.data); } }; }]); now, when add pressed, center added user centers (by pushing current center usercenters array). expect when done, view update , add button replaced remove button, not.
i think because self.centers.data array not changed, view stays same. can suggest solution?
you need use $scope.$watch on self.centers.data 1 :
$scope.$watch('self.usercenters.data',function(newvalue,oldvalue){ if(!newvalue)return; if(newvalue==oldvalue)return; if(!$scope.$$phase){ $scope.$apply(); } });
Comments
Post a Comment