web-dev-qa-db-ja.com

ng-repeatとlimitToを使用して、表示される表示アイテムの数を制限する

結果セットを固定数に制限しようとしています。 limitToをng-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を制限して、制限されている項目のみをカウントする正しい方法は何ですか？

javascriptangularjsangularjs-ng-repeat
46
Bill

次を使用できます。

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

filter:{visible: true}は、表示されているすべてのアイテムのリストを返します

フィルターfilterの詳細については、angularjs docuをご覧ください。 http://docs.angularjs.org/api/ng.filter:filter

69
bekite

次の方法でも実行できます。

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

Ng-ifと$ indexを使用して、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>
1
irth

いくつかのアプローチがありますが、おそらく最も再利用可能なのは、アイテムの可視属性を検索する独自の「可視」カスタムフィルタを作成することです。その後、それらを連鎖させることができます。

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

カスタムフィルターを作成するためのSOリンクがあります

1
Dan Doyon