AngularJSのフィルタリングはアレイ上で繰り返されます

Question

私はAngularを学んでいます。以下のコードは、<select multiple>コントロールに基づいてテーブルの行を動的に表示/非表示します。

コードは動作しますが、data-ng-ifの式をカスタムフィルタを作成せずにフィルタ式に変換する方法があるのだろうかと思います。また、どちらがパフォーマンス面でより良いアプローチであるかもわかりません。

<select id="psgs" data-ng-model="ctrl.showSubGroups" 
    ng-options="item.id as item.name group by item.productGroup.name for item in ctrl.productSubGroupList" 
    multiple> 
</select> 

<tr 
    data-ng-if="ctrl.showSubGroups.indexOf(product.productSubGroup.id) > -1" 
    data-ng-repeat="product in ctrl.productList | filter: ??? | orderBy: ctrl.seq"> 
    ... 
</tr> 

Answer 1

あなたが達成することができ、そのカスタムフィルタを使用して、各反復でng-ifを持つと比較して、それはより良いアプローチです。レンダリングされないものに対してはループを繰り返さないでください。

ここで説明します。あなたのHTMLには、次のように（私たちが作成したカスタムフィルタ機能である）customFilterを使用します。

ctrl.customFilter = function(product) { 
    return ctrl.showSubGroups.indexOf(product.productSubGroup.id) > -1 
} 

ここでは簡単です：

<tr 
    data-ng-repeat="product in ctrl.productList | filter: ctrl.customFilter | orderBy: ctrl.seq"> 
    ... 
</tr> 

を今、あなたのコントローラでは、あなたはこのようなcustomFilter機能を持つことができますworking exampleサンプルデータ付き