Question

如果 ng-if 和 ng-repeat 在同一元素上使用过滤器，即使 ng，过滤器也会被调用一次-if 隐藏了该元素。

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

app.controller('MainCtrl', function($scope, $timeout) {
  $timeout(function() {
    $scope.list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  }, 2000);
});

app.filter('crashyFilter', function() {
  return function(list) {
    return list.map(function(item) {
      return item + 1;
    });
  };
});

<body ng-controller="MainCtrl">
  <div ng-if="list" ng-repeat="item in list | crashyFilter">
    {{item}}
  </div>
</body>

在浏览器控制台中，您可以看到地图调用失败一次，因为list参数未定义。我用它制作了一个羽毛here。

任何人都知道为什么会这样？

Answer 1

在对角度代码库进行一些挖掘后，我发现了原因。

ng-repeat 指令的优先级为1000，而 ng-if 优先级为600.

$compile服务的角度文档说明如果指令在同一元素上设置，则它们按递减优先级顺序编译，因此 ng-repeat 在 ng之前编译-if

这就解释了为什么在 ng-if 可以禁用该元素之前也会调用过滤器。

Answer 2

Filter为我解决这个问题很方便[AngularJS]。

<option ng-repeat="list in lists | filter:{Location:{event: 1}}" value="{{list.Location.id}}">

我希望在哪里展示事件为1的元素。

ng-repeat与过滤器和ng-if在同一元素上的角度优先级

2 个答案: