AngularJS : ng-repeat filter when value is greater than

问题

I have a simple ng-repeat that throws out data, one of fields it displays is 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>

Example output:

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

How can i modify this ng-repeat to only show records where the NumberOfStams is > 0? I\'ve tried:

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

Expected output:

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

回答1:

Create a predicate function on the relevant scope:

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

As a first argument, it takes a property name on the object. The second argument is an integer value.

Use it in your view like this:

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

Demo

回答2:

You can create a filter with ng-if like this:

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

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

回答4:

One possible way would be to remove the items that do not meet the criterai from the DOM using ng-if

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

Because you cannot have a div in a tr you have to ng-if the td's seperately, which is not optimal if you have alot of td's

回答5:

Take a look at this stack overflow answer. AngularJS - How to structure a custom filter with ng-repeat to return items conditionally it clearly explains how to create a custom angular filter for use with ng-repeat. Once you understand this you will be able to filter out basically anything from an ng-repeat!

来源：https://stackoverflow.com/questions/24081004/angularjs-ng-repeat-filter-when-value-is-greater-than

标签

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat