Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 628
Oam Psy Avatar asked Jun 06 '14 11:06

Oam Psy


People also ask

How do I filter in NG-repeat?

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

How do I get an index in NG-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

What is the use of NG-repeat in AngularJS?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.


2 Answers

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

like image 176
Marc Kline Avatar answered Oct 08 '22 00:10

Marc Kline


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

<li ng-repeat="seller in sellers" ng-if="seller.sales > 0" >{{ seller.name }}</li> 
like image 35
Ciro Mine Avatar answered Oct 08 '22 02:10

Ciro Mine