Angularjs ng-repeat not updating after array update

Question

I'm not sure what I'm missing here but I'm trying to update a value inside an array, and then have this reflected in the repeater. Do I need to make a copy or something before applying the update in order for Angular to show the changes?

---sample json

  "lists": [
       {
        "name": "one",
        "enabled": true
       },
       {
        "name": "two",
        "enabled": false
       }
    ]

!-- code

setTimeout(function(){
    $scope.$apply(function(){
    $scope.lists[1].enabled = true;
});
},1);

!--- html

<span data-ng-repeat="list in lists | filter: {enabled: true}"></span>

please add the html code, if you use data-ng-repeat="item in items" and $items is an array it will update — Liad Livnat
– Liad Livnat, Commented Jul 16, 2014 at 12:30
code is far too disconnected without being able to see your scope and basic html — charlietfl
– charlietfl, Commented Jul 16, 2014 at 12:35
I expect the community can solve this if you can provide a jsfiddle of your problem — Ross Taylor-Turner
– Ross Taylor-Turner, Commented Jul 16, 2014 at 12:37
the repeater is generated from another controller. So I need to access that controller by reference, in order to refresh the repeater? — Jimi
– Jimi, Commented Jul 16, 2014 at 12:40

lulu88 · Accepted Answer · 2014-07-16 12:46:39Z

7

From the "other controller" you are talking about broadcast an event:

 $rootScope.$broadcast('listChange', listArray);

Then in the controller that controls your $scope.lists value, listen for the event:

  $scope.$on('listChange', function(event, list) {

       $scope.$apply(function() {
           // Update goes here
         });

    });

answered Jul 16, 2014 at 12:46

lulu88

1,7346 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leedotpang · Accepted Answer · 2014-07-16 12:40:40Z

1

It might help if you use angulars built-in timeout function $timeout.

$timeout(function(){
    $scope.lists[1].enabled = true;
},1);

Documentation here: https://docs.angularjs.org/api/ng/service/$timeout

answered Jul 16, 2014 at 12:40

leedotpang

1061 silver badge7 bronze badges

Comments

lui1000 · Accepted Answer · 2014-07-16 13:06:22Z

0

Add your lists variable to the $scope inside your controller like this:

$scope.lists = [{
    "name": "one",
    "enabled": true
   },
   {
    "name": "two",
    "enabled": false
   }];

You also have to add something inside the <span>, because the Html you posted would not display anything. (You need to do something inside the <span> tag in order to show something)

<span ng-repeat="list in lists | filter:{enabled: true}">{{list.name}}</span>

Now when you update the lists variable, this will be reflected in the Html immediately. Works fine for me. Hope i could help!

answered Jul 16, 2014 at 13:06

lui1000

891 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angularjs ng-repeat not updating after array update

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related