AngularJS - refresh ng-repeat

Question

Я использую ng-repeat для отображения коллекции значений. Параметры моего фильтра меняются в соответствии с вызовом ajax на сервер. Как обновить ng-repeat после получения параметров фильтра?

js fiddle

Шаблон

<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> 

Угловая

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 1

Вы должны сказать, что угловые значения имеют изменения:

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

Answer 2

После получения вашего фильтра с именем $ scope. $ Apply() следующим образом: Он обновляет вашу область.

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

Answer 3

Вы поместили <button ng-click="loadNewFilter()"> filter now</button> из области видимости контроллера.

Answer 4

В моем случае у меня был trackBy в моем ng-repeat и пришлось удалить его, чтобы обновить его.