检查下一个项目是否存在于 ng-repeat 项目中

Question

我将 ng-repeat 与 limitTo 过滤器和一个按钮一起使用，以便在单击时提高限制。有什么方法可以检查 ng-repeat 迭代中的下一个项目是否 exists/count 还有多少项目，以便我可以隐藏 'load more' button/show 还有多少项目。

下面是我正在尝试做的一个例子：

 <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>

Answer 1

您可以执行与此代码笔类似的操作： 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>

此外，您应该将负载更多 link 放在 ng-repeat 之外以仅显示一次。

Answer 2

理想情况下，我认为你想要做的是在你的范围内设置一个增量值，并添加一个名为 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;
}

那么在你看来你会想做这样的事情：

<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>

检查下一个项目是否存在于 ng-repeat 项目中

Check if next item exists inside an ng-repeat item

javascript

frontend

angularjs

angularjs-directive

angularjs-ng-repeat