javascript - Angularjs ng-repeat not updating after array update - Stack Overflow

admin管理员组

文章数量:1426959

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>

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>

• javascript
• angularjs

Share Improve this question Follow edited Jul 16, 2014 at 12:36 Jimi asked Jul 16, 2014 at 12:29 JimiJimi 1,90799 gold badges3232 silver badges5656 bronze badges 5

• 2 please add the html code, if you use data-ng-repeat="item in items" and $items is an array it will update – 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 Commented Jul 16, 2014 at 12:35
• I expect the munity can solve this if you can provide a jsfiddle of your problem – 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 Commented Jul 16, 2014 at 12:40
• 1 the code works fine: jsfiddle/gHb9z – Raghavendra Commented Jul 16, 2014 at 12:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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
         });

    });

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/api/ng/service/$timeout

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!

本文标签： javascriptAngularjs ngrepeat not updating after array updateStack Overflow