gpt4 book ai didi

javascript - Angularjs ng-repeat 并不总是在 $last 上触发

转载 作者:行者123 更新时间:2023-11-27 22:57:48 24 4
gpt4 key购买 nike

我有一个带有过滤器、limitTo 和指令的 ng-repeat。过滤器来自输入字段,列表过滤器很好。我正在尝试在重复完成指令中跟踪 $last,这在大多数情况下都可以正常工作,但是在输入字段中输入某些字符串时,该指令不会在 $last 上触发。

我在这里添加了一个 fiddle https://jsfiddle.net/1bzg1p7t/19/

<ul>
<li ng-repeat="item in vm.items | inputFilter:vm.inputSearch |limitTo: vm.limit" repeat-finish>{{item.showroomName}}</li>
</ul>

问题字符串:'yoo'

如果您在输入字段中输入上面的字符串,您将看到警报不会在“yo”之后触发“finished”,但当您删除“o”时,它将触发。

任何关于为什么 $last 不触发的帮助将不胜感激。谢谢

最佳答案

The link function is responsible for registering DOM listeners as well as updating the DOM. It is executed after the template has been cloned. This is where most of the directive logic will be put.

link函数仅在模板被克隆(添加到 dom)后执行 - 这里的模板是你的 <li>元素。

当您输入“yo”时,过滤功能会过滤掉不匹配的项目,并将匹配的项目保留在列表中。一旦您输入最后一个“o”,其余项目就会被删除,您只剩下“YND Group LLC、DBA Seeka 和 Yoolie's”。

由于当您输入“yo”时,“YND Group LLC、DBA Seeka 和 Yoolie's”项目已经在列表中(并且在 DOM 中),因此当您输入最后一个“o”时,链接功能不会再次触发

我已经 fork 了你的jsfiddle并在链接功能触发时为每个项目添加一个计数器。当您输入“yoo”时,您将看到“Link Function Executed”值将为 1,因为它只触发一次。

更新指令:

.directive('repeatFinish', function($timeout){
return {
restrict: 'A',
link: function (scope, element, attr) {
if(scope.item.linkFunctionExecuted){
scope.item.linkFunctionExecuted++;
}else{
scope.item.linkFunctionExecuted = 1;
}

if (scope.$last === true) {
$timeout(function () {
//console.log('--------------------------------------end');
});
}
}
};
});

更新的 HTML:

<body ng-app="app">


<div ng-controller="Main as vm">
<input type="text" ng-model="vm.inputSearch">

<ul>
<li ng-repeat="item in vm.items | inputFilter:vm.inputSearch |limitTo: vm.limit" repeat-finish>{{item.showroomName}} Link Function Executed{{item.linkFunctionExecuted}} times</li>
</ul>
</div>

与问题无关,只是一个提示:您可以使用 placeholder属性作为输入的默认值,那么您不必检查“search”的值

关于javascript - Angularjs ng-repeat 并不总是在 $last 上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37438336/

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