AngularJS - refresh ng-repeat

Question

I'm using ng-repeat to display a collection of values. My filter options changes according to an ajax call to server. How can I refresh the ng-repeat after the filter parameters have been received?

js fiddle

Template

<div>
<div data-ng-controller="myCtrl">
    <ul>
        <li data-ng-repeat="item in values | filter:filterIds()"> 
            <code>#{{item.id}}</code> Item
        </li>
    </ul>
   </div>
 </div> 
<button ng-click="loadNewFilter()"> filter now</button>

Angular

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
  $scope.values = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4},
   {id: 5},
   {id: 6}
  ];

  $scope.filter = [1,2,3,4,5,6];

  $scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;
            return filter.indexOf(item.id) !== -1;          
        }
  }

  $scope.loadNewFilter = function (){
    $scope.filter = [1,2,3];      
   }
});

Chris Charles · Accepted Answer · 2014-09-15 08:17:36Z

48

You need to tell angular that the values have changes:

$scope.loadNewFilter = function (){
    $scope.filter = [1,2,3];      
    $scope.$apply();
}

answered Sep 15, 2014 at 8:17

Chris Charles

4,44620 silver badges31 bronze badges

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

2 Comments

RahulB Over a year ago

@user1477955 :jsfiddle.net/6nssg30q/6 button is out of scope of controller. It works now

Magic Marbles Over a year ago

This solved an issue I was having wherein adding items to an array via a callback did not update the ng-repeat automatically. Calling $source.$apply(); right after adding a new item caused it to show up just fine.

Gaurav · Accepted Answer · 2014-09-15 08:20:55Z

9

You have placed <button ng-click="loadNewFilter()"> filter now</button> out of controller scope.

answered Sep 15, 2014 at 8:20

Gaurav

28.8k8 gold badges54 silver badges81 bronze badges

1 Comment

Lukas Over a year ago

Funny, my next issue was how to call a click event in angularJS. Thank you :) +1

aoakeson · Accepted Answer · 2016-09-29 22:17:13Z

8

In my case I had a trackBy in my ng-repeat and had to remove it to get it to update.

answered Sep 29, 2016 at 22:17

aoakeson

6021 gold badge8 silver badges21 bronze badges

2 Comments

Dave Over a year ago

Precisely the same issue for me! Thank you - I'd not ever have expected tracyBy to cause a problem - I've only known it solves issues before!

Amrit Kahlon Over a year ago

@Meliodas you can use $index without trackBy

Mahesh · Accepted Answer · 2014-09-15 08:20:46Z

2

After receiving your filter called $scope.$apply() as following: It is refresh your scope.

$scope.$apply(function() {
     // your code
});

answered Sep 15, 2014 at 8:20

Mahesh

1,0911 gold badge12 silver badges29 bronze badges

Comments

Duilio · Accepted Answer · 2018-11-14 15:12:00Z

0

I didnt need to use $scope.apply() to see the update. What solved this error for me was to make sure:

The update was being called from inside the controller.
The controller that called the update was the same that contained the ng-repeat.

answered Nov 14, 2018 at 15:12

Duilio

1,0661 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS - refresh ng-repeat

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

Comments

Linked

Related