user1477955 user1477955 - 2 months ago 32
AngularJS Question

AngularJS - refresh ng-repeat

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];
}



});

Answer

You need to tell angular that the values have changes:

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