使用ng-repeat和limitTo限制顯示的可見項數

我試圖將我的結果集限制爲一個固定的數字。我可以使用limitTo和ng-repeat，但這會限制項目，而不管其當前可見性，並從DOM中刪除項目。我想限制在一些可見的項目，同時保持DOM中的所有內容。使用ng-repeat和limitTo限制顯示的可見項數

這是我現在的代碼。我的目標是始終在列表中顯示不超過50個項目，即使items包含500個項目。

<div ng-repeat="item in items | limitTo: 50"> 
    <div ng-show="item.visible"> 
    <p>item.id</p> 
    </div> 
</div>

這最初將限制到50項，但是如果我過濾列表（通過修改item.visible上的某些項），列表從未示出了在50的範圍內的物品 - 500，而是顯示小於50項目。限制ng-repeat的正確方法是什麼，以便它只對可見項目計入限制限制？

來源

2013-10-25 Bill

您可以使用：

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50"> 
    <p>{{item.id}}</p> 
</div>

filter:{visible: true}將返回所有可見項目的列表

你可以看看angularjs實況有關的更多信息過濾器。 http://docs.angularjs.org/api/ng.filter:filter

來源

2013-10-26 00:00:01 bekite

這不是一回事，因爲過濾器從DOM中刪除項目（如ng-if），而不是僅僅修改可見性（如ng-show）。我正在尋找一個適用於ng-show的解決方案。 – Bill

你想在DOM中保留隱藏元素的原因是什麼？ – bekite

不斷添加和刪除它們很慢。使用ng-show，過濾的體驗是瞬時的，使用ng - 如果在更新的結果顯示之前有輕微的打嗝。 – Bill

有幾種方法，也許最可重複使用的方法是創建自己的「可見」自定義過濾器，它在物品上查找可見屬性。然後你可以鏈接它們。

<div ng-repeat="item in items | visible | limitTo: 50">

Here's a SO link to create custom filters

來源

2013-10-25 23:48:51

是否有解決方案不會從DOM中刪除項目？我正在尋找一些適用於ng-show的東西。 – Bill

也可以做到這一點是這樣的：

<div ng-repeat="item in items" ng-show="$index<50"> 
    <p>item.id</p> 
</div>

來源

2015-03-27 19:59:35 Kostyantyn

這種方法將HTML放置到位。如果你有2000條記錄，那是2000個div放入你的HTML但沒有看到。 'ng-if'稍微好一點，它會轉儲註釋而不是html，但是使用limitTo仍然會更好，因此它不會向文檔中輸出額外的內容 –

可以使用NG，如果與$索引指定DOM顯示。仍然會生成ng-if註釋，但不會加載該對象，因此可以提高性能。

<div ng-init="your.objects={{},{},{}}; your.max=10"> 
    <div ng-repeat="object in your.objects" ng-if="$index<your.max"> 
    {{object}} 
    </div> 
</div>

來源

2015-06-19 08:01:41 irth

使用ng-repeat和limitTo限制顯示的可見項數

回答

相關問題