[AngularJS]AngularJS 自定义筛选器被调用两次

发布时间: 2017/4/16 20:47:24
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我创建了使用打印出的水果,以 p 开头的 AngularJS 的自定义筛选器。就我所知,我正确地实现了自定义筛选器。

我要打印出一条消息,每次筛选器被调用,但我很好奇为什么我的筛选器被调用两次。

我看着类似的问题在计算器上找到一个人,他有一个类似的问题,然而这个问题不回答,稍有不同。

JSFiddle 解决方案http://jsfiddle.net/ddemott/U3pVM/22606/

HTML 代码

<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'
  }, ];
});

解决方法 1:

这是正确的行为,它强烈加上如何 $digest 循环工程

每次模型更改 $digest 至少两次运行︰

  1. 模型变动后它运行的观察家和更新模型
  2. 要检查是否第一次 $digest 所作的修改模型,如果另一个摘要到最大十次迭代然后叫角抛出错误。

还有什么可担心的除非你有很多的模板和不稳定的模型 (经常变化) 中的函数

我已经更新你的小提琴与更新模型在范围上的简单按钮

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

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

您将看到每次您单击该按钮筛选器运行两次

赞助商