AngularJS:当值大于时,ng-repeatfilter

我有一个简单的ng-repeat,它会抛出数据,它显示的一个字段是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 

我怎样才能修改这个ng-repeat只显示NumberOfStams> 0的logging? 我试过了:

 <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 

在相关范围上创build一个谓词函数:

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

作为第一个参数,它在对象上取一个属性名称。 第二个参数是一个整数值。

像这样在你的视图中使用它:

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

演示

你可以使用ng创build一个filter,如下所示:

 <li ng-repeat="seller in sellers" ng-if="seller.sales > 0" >{{ seller.name }}</li> 
 <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> 

一种可能的方法是使用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,所以你必须要ng – 如果td是单独的,如果你有很多的td

看看这个堆栈溢出的答案。 AngularJS – 如何使用ng-repeat构造自定义filter以有条件地返回项目,这清楚地解释了如何创build自定义angular度filter以便与ng-repeat一起使用。 一旦你明白这一点,你将能够基本上从ng-repeat滤除任何东西!