[英]Check if next item exists inside an ng-repeat item
I'm using ng-repeat with a limitTo filter and a button to raise the limit when clicked. 我正在使用带有limitTo过滤器的ng-repeat和单击时提高限制的按钮。 Is there any way to check if the next item in the ng-repeat iteration exists/count how many more items there are so that i can hide the 'load more' button/show how many more items there are.
有什么方法可以检查ng-repeat迭代中的下一个项目是否存在/计数还有多少个项目,以便我可以隐藏“加载更多”按钮/显示有多少个项目。
below is sort of an example of what I am trying to do: 以下是我要执行的操作的一个示例:
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
<div ng-show="filteredItems[$index + 1]" ng-click="increaseLimit()">load more (3 more replies)</div>
</div>
You can do something similar to this codepen: http://codepen.io/anon/pen/waxOZL 您可以执行与此代码笔相似的操作: http ://codepen.io/anon/pen/waxOZL
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
</div>
<div ng-show="collection.data.length > commentLimit" ng-click="increaseLimit()">load more (3 more replies)</div>
Also, you should put the load more link outside the ng-repeat to show it only once. 另外,您应该将更多负载链接放在ng-repeat之外,以仅显示一次。
Ideally, I think what you want to do is set an increment value in your scope, and add a new function called nextIncrementAmount
which will help you display the number of new replies the button will add when clicked. 理想情况下,我认为您要在范围中设置一个增量值,并添加一个名为
nextIncrementAmount
的新函数,该函数将帮助您显示单击按钮时按钮将添加的新答复数。
$scope.commentLimit = 3;
$scope.incrementStep = 3;
//use this function to increase the filter limit
$scope.increaseLimit = function() {
var newLimit = $scope.commentLimit + $scope.incrementStep;
$scope.commentLimit = (newLimit < $scope.collection.data.length) ? newLimit : $scope.collection.data.length;
}
//use this function to show the number of replies the increment button will increment by.
$scope.nextIncrementAmount = function() {
var newLimit = $scope.commentLimit + $scope.incrementStep;
return (newLimit < $scope.collection.data.length) ? $scope.incrementStep : $scope.collection.data.length - $scope.commentLimit;
}
Then in your view you'll want to do something like this: 然后,在您看来,您将需要执行以下操作:
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
</div>
<div ng-if="collection.data.length != commentLimit"
ng-click="increaseLimit()">
load more (<ng-pluralize count="nextIncrementAmount()"
when="{
'1': '{} more reply',
'other': '{} more replies',
}"> </ng-pluralize>)
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.