2013-10-25 9 views
43

を表示します。 limitTong-repeatを使用できますが、これは現在の可視性に関係なくアイテムを制限し、DOMからアイテムを削除します。私はDOM内のすべてを保持しながら、目に見えるアイテムの数に制限したい。は、私は固定数に私の結果セットを制限しようとしている

は、ここで私が持っている現在のコードです。私の目標は、itemsに500アイテムが含まれていても、常にリストに50アイテム以下を表示することです。

<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を制限する正しい方法は、目に見えるアイテムを制限制限にカウントするだけですか?

答えて

64

あなたは使用することができます。

<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

+1

これは、フィルタが(ng-showのような)可視性を変更するのではなく、DOMから項目を削除するので(ng-ifのような)項目と同じではありません。私はng-showで動作するソリューションを探しています。 – Bill

+0

隠された要素をDOMに残したい理由は何ですか? – bekite

+0

絶えず追加したり削除したりするのが遅いです。 ng-showを使用すると、フィルタリングの経験は瞬時になります。更新された結果が表示される前にわずかなヒザクがある場合は、ngを押します。 – Bill

1

あなたの項目の表示属性を探し、独自の「目に見える」カスタムフィルタを作成するためのアプローチのカップルがありますが、おそらく最も再利用可能です。それであなたはそれらを連鎖させることができます

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

Here's a SO link to create custom filters

+0

DOMから項目を削除しないソリューションはありますか?私はng-showで動作するものを探しています。 – Bill

15

このようにそれを行うことも可能である:

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

このメソッドは、HTMLを物理的に配置します。 2000レコードがあれば、それはあなたのHTMLに落とされた2000のdivですが、見られません。 'ng-if'はhtmlの代わりにコメントをダンプする点で若干優れていますが、余分な内容をドキュメントに出力しないようにlimitToを使う方が良いでしょう –

1

あなたはDOMの表示を指定するには、$インデックスとNG-場合に使用することができます。コメントの場合でも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> 
関連する問題