檢查下一個項目是否存在於ng-repeat項目內

Question

我正在使用ng-repeat與limitTo過濾器和一個按鈕來提高單擊時的限制。有什麼辦法可以檢查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的新函數，它將幫助你顯示單擊按鈕時添加的新回覆數。

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