Question

我有一个简单的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？我试过了：

<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

Answer 1

在相关范围上创建谓词函数：

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

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

在您的视图中使用它：

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

Demo

Answer 2

您可以使用ng-if创建一个过滤器，如下所示：

<li ng-repeat="seller in sellers" ng-if="seller.sales > 0" >{{ seller.name }}</li>

Answer 3

<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>

Answer 4

一种可能的方法是使用ng-if

从DOM中删除不符合criterai的项目

<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>

因为你需要you cannot have a div in a tr - 如果td是单独的，如果你有很多td那么这不是最佳的

Answer 5

看看这个堆栈溢出答案。 AngularJS - How to structure a custom filter with ng-repeat to return items conditionally 它清楚地解释了如何创建用于ng-repeat的自定义角度过滤器。一旦理解了这一点，您就可以基本上过滤掉stdClass Object ( [return] => stdClass Object ( [isactive] => Harry Potter and the Prisoner of Azkaban [service] => stdClass Object ( [serviceName] => game ) ) )！

中的任何内容

当值大于时，AngularJS：ng-repeat过滤器

5 个答案: