AngularJS自定义过滤器被调用两次

AngularJS custom filter being called twice

本文关键字：两次 调用 自定义 过滤器 AngularJS      更新时间：2023-09-26

我使用AngularJS创建了一个自定义过滤器，可以打印出以p开头的水果。据我所知，我已经正确实现了自定义过滤器。

每次调用过滤器

时，我都会打印出一条消息，但我很好奇为什么我的过滤器被调用两次。

在stackoverflow上查看类似的问题，我发现一个人有类似的问题，但是问题没有得到解答，而且有点不同。

JSFiddle Solutionhttp://jsfiddle.net/ddemott/U3pVM/22606/

网页代码

<body>
    <div ng-controller="ExampleCtrl" ng-app="sampleApp">
    <div class="showDiffTags" ng-repeat="val in values | myFilter:'p'">{{val.name}}</div>
    </div>
</body>

AngularJS 代码

angular.module('sampleApp', []).filter('myFilter', function() {
  return function(items, firstLetter) {
    var groups = [];
    console.log("called function");
    console.log(items.length);
    for (var i = 0; i < items.length; i++) {
      if (items[i].name.substring(0, 1) == firstLetter) {
    groups.push(items[i]);
      }
    }
    return groups;
  }
}).controller('ExampleCtrl', function($scope) {
  $scope.values = [{
    name: 'apple'
  }, {
    name: 'banana'
  }, {
    name: 'orange'
  }, {
    name: 'avocado'
  }, {
    name: 'pineapple'
  }, {
    name: 'peach'
  }, {
    name: 'plum'
  }, {
    name: 'grapes'
  }, {
    name: 'mango'
  }, {
    name: 'papaya'
  }, ];
});

这是正确的行为，它与$digest周期的工作方式密切相关

每次模型更改时，$digest至少运行两次：

    模型
  1. 更改后，它会运行观察程序并更新模型
  2. 检查第一个$digest是否对模型进行了更改，如果是，则调用另一个摘要最多十次迭代，然后是角度抛出错误。

除非您在模板和不稳定的模型中有很多功能（经常更改），否则无需担心

我已经用简单的按钮更新了你的小提琴，该按钮更新了范围内的模型

http://jsfiddle.net/U3pVM/22610/

<button ng-click="numModel = numModel + 1">
  update model {{numModel}}
</button>

您将看到每次单击按钮过滤器都会运行两次

相关文章：