web-dev-qa-db-fra.com

AngularJS: filtre ng-repeat lorsque la valeur est supérieure à

J'ai un simple ng-repeat qui jette des données, un des champs qu'il affiche est 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>

Exemple de sortie:

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

Comment puis-je modifier cette répétition pour afficher uniquement les enregistrements où NumberOfStams est> 0? J'ai essayé:

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

Production attendue:

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

Créez une fonction de prédicat sur la portée appropriée:

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

En premier argument, il prend un nom de propriété sur l'objet. Le deuxième argument est une valeur entière.

Utilisez-le dans votre vue comme ceci:

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

démo

79
Marc Kline

Vous pouvez créer un filtre avec ng-if comme ceci:

<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

Un moyen possible serait de supprimer les éléments du DOM qui ne répondent pas aux critères en utilisant 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>

Parce que vous ne pouvez pas avoir un div dans un tr vous devez indiquer si le td est séparé, ce qui n'est pas optimal si vous avez beaucoup de td

1
Tim Castelijns

Jetez un oeil à cette réponse de débordement de pile. AngularJS - Comment structurer un filtre personnalisé avec ng-repeat pour renvoyer des éléments de manière conditionnelle Il explique clairement comment créer un filtre personnalisé angular à utiliser avec ng-repeat. Once vous comprenez que vous pourrez filtrer fondamentalement quoi que ce soit d'un ng-repeat!

0
Benjamin Conant