Question

我正在使用ng-repeat来显示一组值。我的过滤器选项根据对服务器的ajax调用而更改。如何在收到过滤器参数后刷新ng-repeat？

模板

<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

你已经放好了 <button ng-click="loadNewFilter()"> filter now</button>超出控制器范围。

Answer 3

在我的情况下，我在ng-repeat中有一个trackBy，不得不将其删除以使其更新。

Answer 4

收到名为$ scope。$ apply（）的过滤器后，如下所示：刷新范围。

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

Answer 5

我不需要使用$ scope.apply（）来查看更新。为我解决了此错误的原因是确保：

正在从控制器内部调用更新。
调用更新的控制器与包含ng-repeat的控制器相同。

AngularJS - 刷新ng-repeat

5 个答案: