AngularJS : 값이 다음 값보다 클 경우 ng-repeat 필터

AngularJS : 값이 다음 값보다 클 경우 ng-repeat 필터

데이터를 삭제하는 단순한 ng-repeat이 있습니다.이 ng-repeat에 표시되는 필드 중 하나는 Number Of Stamps입니다.

<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

Number Of Stams가 0보다 큰 레코드만 표시하도록 이 ng-repeat을 수정하려면 어떻게 해야 합니까?저는 다음과 같이 시도했습니다.

<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

관련 스코프에 술어 함수를 만듭니다.

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

첫 번째 인수로 오브젝트의 속성 이름을 사용합니다.두 번째 인수는 정수 값입니다.

뷰에서 다음과 같이 사용합니다.

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

데모

다음과 같이 ng-if를 사용하여 필터를 만들 수 있습니다.

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

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

하나의 방법은 ng-if를 사용하여 DOM에서 기준을 충족하지 않는 항목을 삭제하는 것입니다.

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

tr에 div를 포함할 수 없기 때문에 td가 따로 있으면 ng-td가 많으면 최적은 아니다.

이 스택 오버플로우 답변을 참조하십시오.각진JS - ng-repeat에서 조건부로 항목을 반환하는 커스텀필터를 구성하는 방법에서는 ng-repeat에서 사용하는 커스텀 앵글필터를 작성하는 방법에 대해 설명합니다.이것을 이해하면, 기본적으로는 모든 것을 필터링 할 수 있게 됩니다.ng-repeat!

언급URL : https://stackoverflow.com/questions/24081004/angularjs-ng-repeat-filter-when-value-is-greater-than