Question

我正在使用带有limitTo过滤器的ng-repeat和一个按钮来点击时提高限制。有没有办法检查ng-repeat迭代中的下一个项目是否存在/计算有多少项目，以便我可以隐藏“加载更多”按钮/显示有多少项目。

下面的

是我想要做的一个例子：

 <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

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

此外，您应该在ng-repeat之外加载更多链接以仅显示一次。

Answer 2

理想情况下，我认为您要做的是在示波器中设置增量值，并添加一个名为nextIncrementAmount的新函数，它将帮助您显示按钮在单击时添加的新回复的数量。< / p>

$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项目中是否存在下一个项目

2 个答案: