gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:36:43 24 4
gpt4 key购买 nike

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

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

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

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

最佳答案

这是正确的行为,它与 $digest 循环的工作方式密切相关

每次模型更改时,$digest 都会至少运行两次:

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

除非你的模板中有很多功能并且模型不稳定(经常变化),否则没什么可担心的

我已经用简单的按钮更新了你的 fiddle ,该按钮可以更新范围内的模型

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

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

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

关于javascript - AngularJS 自定义过滤器被调用两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35582114/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com