AngularJS: фильтр ng-repeat, когда значение больше, чем

У меня есть простой 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

Ответ 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)">

Демо

Ответ 2

Вы можете создать фильтр с помощью ng-if:

<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

Один из возможных способов - удалить элементы, которые не соответствуют критерию из DOM, используя 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>

Потому что у вас не может быть div в tr, вам нужно ng-if td отдельно, что не является оптимальным, если у вас есть много td

Ответ 5

Взгляните на этот ответ. AngularJS - Как создать собственный фильтр с ng-repeat для условного возврата элементов в нем четко объясняется, как создать пользовательский фильтр angular для использования с ng-repeat. Как только вы это поймете, вы сможете отфильтровать в основном что-нибудь из ng-repeat!