ng-repeat를 속성 값으로 필터링하는 방법은 무엇입니까?

Question

ng-repeat으로 목록을 반복 할 때 해당 항목의 속성으로 조건/필터를 추가하는 방법은 무엇입니까? 난 단지 항목 type!='test'을 보여주고 싶은

{"items":[{"type":"xxx"}]} 

:

예 (물론 현실 세계에서 몇 가지 항목이 있습니다).

는 단지 다음과 같은 것은 아무것도 출력하지 :

나는 필터를 제거하는 경우, 모든 항목은 물론, 인쇄 반면

<ul ng-repeat="item in items | filter: (item.type != 'test')"> 

.

type 값이 허용되지 않는지 확인하는 방법은 가능하면 어떻게 할 수 있습니까? 당신과 같이 재사용에 대한 자신 만의 필터를 만들 수있는 여러 type 값을 제공하기 위해

<ul ng-repeat="item in items | filter: {type: '!test'}"> 

을 :

Answer 1

간단하면 filter 표현식의 함수를 사용하십시오.

데이터 스키마 변경 그냥 필터 기능을 업데이트하는 경우

angular.module('app', []) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.items = [{ 
 
     "type": "xxx" 
 
    }, { 
 
     "type": "test" 
 
    }]; 
 

 
    $scope.filterFn = function(value) { 
 
     return value.type !== 'test'; 
 
    }; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="AppCtrl"> 
 
    <ul> 
 
    <li ng-repeat="item in items | filter: filterFn">{{item.type}}</li> 
 
    </ul> 
 
</div>

.

또한 객체 표기법 사용할 수

angular.module('app', []) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.items = [{ 
 
     "type": "xxx" 
 
    }, { 
 
     "type": "test" 
 
    }]; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="AppCtrl"> 
 
    <ul> 
 
    <li ng-repeat="item in items | filter: {type: '!test'}">{{item.type}}</li> 
 
    </ul> 
 
</div>

그러나 이것은 프리미티브 값 필터 (는 항목과 특성을 가진 개체를 예상)와 같은 필터를 suporting하지 같은 몇 가지 한계를 가지고는 할 수 없습니다 여러 번 지정하십시오 (예 : {type:"!test!xxx"})

Answer 2

이 같이 읽도록 ng-repeat을 바꿀 수 변경 후

app.filter('typeFilter', function(){ 
    return function(arr,criteria){ 
    if(!angular.isDefined(criteria) || criteria == ''){ 
     return arr; 
    } 

    return arr.filter(function(curr){ 
     return criteria.indexOf(curr.type) == -1; 
    }); 
    } 
}); 

을하고 ng-repeat 읽을 거리 :

//List array of criteria... 
<ul ng-repeat="item in items | typeFilter:['test'] ">