web-dev-qa-db-ja.com

AngularJS：値がより大きい場合のng-repeatフィルター

データをスローする単純なng-repeatがあります。表示されるフィールドの1つはNumberOfStampsです。

<tr ng-repeat-start="list in Data.Items ">
   <td><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
   <td>(Date of Birth {[{list.Dob}]})</td>
   <td>{[{list.NumberOfStamps}]}  stamps</td>
</tr>

出力例：

Mr Adam Happy  Date of Birth 01/6/1984     16 stamps
Mr Adam Sad    Date of Birth 24/11/1975    0 stamps
Mr Adam Green  Date of Birth 02/1/1963     1 stamps
Mr Adam Red    Date of Birth 21/1/1951     12 stamps
Mr Adam Blue   Date of Birth 28/10/1998    0 stamps
Mr Adam Brown  Date of Birth 25/9/2010     0 stamps
Mr Adam Black  Date of Birth 24/8/1954     21 stamps
Mr Adam Violet Date of Birth 17/5/1942     54 stamps

NumberOfStamsが> 0であるレコードのみを表示するようにこのng-repeatを変更するにはどうすればよいですか？私はもう試した：

<tr ng-repeat-start="list in Data.Items | filter:{NumberOfStamps > 0}">
   <td><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
   <td>(Date of Birth {[{list.Dob}]})</td>
   <td>{[{list.NumberOfStamps}]}  stamps</td>
</tr>

期待される出力：

Mr Adam Happy  Date of Birth 01/6/1984     16 stamps
Mr Adam Green  Date of Birth 02/1/1963     1 stamps
Mr Adam Red    Date of Birth 21/1/1951     12 stamps
Mr Adam Black  Date of Birth 24/8/1954     21 stamps
Mr Adam Violet Date of Birth 17/5/1942     54 stamps
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
33
Oam Psy

関連するスコープで述語関数を作成します。

$scope.greaterThan = function(prop, val){
    return function(item){
      return item[prop] > val;
    }
}

最初の引数として、オブジェクトのプロパティ名を取ります。 2番目の引数は整数値です。

ビューで次のように使用します。

<tr ng-repeat-start="list in Data.Items | filter: greaterThan('NumberOfStamps', 0)">

デモ

79
Marc Kline

次のようなng-ifを使用してフィルターを作成できます。

<li ng-repeat="seller in sellers" ng-if="seller.sales > 0" >{{ seller.name }}</li>
36
Ciro Mine
<tr ng-repeat-start="Data.Items in list = ( Data.Item | filter:{NumberOfStamps : !0}">
   <td><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
   <td>(Date of Birth {[{list.Dob}]})</td>
   <td>{[{list.NumberOfStamps}]}  stamps</td>
</tr>
2
Dinesh ML

可能な方法の1つは、 ng-if を使用して、基準を満たさないアイテムをDOMから削除することです。

<tr ng-repeat-start="list in Data.Items ">
    <td ng-if="list.NumberOfStamps > 0"><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
    <td ng-if="list.NumberOfStamps > 0">(Date of Birth {[{list.Dob}]})</td>
    <td ng-if="list.NumberOfStamps > 0">{[{list.NumberOfStamps}]}  stamps</td>
</tr>

trにdivを置くことはできません tdが個別にng-ifする必要があるため、tdがたくさんある場合は最適ではありません

1
Tim Castelijns

このスタックオーバーフローの答えをご覧ください。 AngularJS-条件付きで項目を返すためにng-repeatでカスタムフィルターを構築する方法 ng-repeatで使用するカスタムangularフィルターを作成する方法。これを理解すると、基本的にng-repeat！

0
Benjamin Conant