여러 링크를 사용하여 AngularJS에서 목록을 필터링하는 방법

Question

목록을 필터링하는 방법에 대한 많은 자습서를 읽었으며 간단한 사용 사례에 대한 예제를 찾을 수 없습니다. 내가 var persons = {...} 개체가 같은

<a href="#" id="filter-by-name">Name</a> 
<a href="#" id="filter-by-age">Age</a> 
<a href="#" id="filter-by-height">Height</a> 

로

나는 몇 가지 버튼이 내가 그렇게 할 때마다 내가 중 하나를 클릭하는 필터를 만들려면 어떻게해야 내가

<div ng-repeat="person in persons"> 
    {{person.name...}} 
</div> 

처럼 표시 버튼 목록이 필터링됩니까?

내가 ng-repeat="person in persons | filter:filterPersons" 를 추가하는 시도하고 스크립트 측에서 작성 :

$scope.filterPersons(person){ 
    if (person.name == "John") 
    return person; 
} 

을하지만, 이것은 (? 어떻게 다른 이름으로 필터링 할 수 있습니다) 하나의 사용 사례입니다 - 즉 - 링크를 필터에 어떻게 연결합니까?

Answer 1

필터는 다른 것과 마찬가지로 범위 변수에 바인딩 할 수 있습니다. 따라서 사용자가 클릭하여 필터 매개 변수 ng-repeat에 바인드 할 때 해당 필터를 범위에 맞게 설정하면됩니다. 참조 :

사용자가 필터를 클릭하면 myFilter이 변경되는 것을

<div ng-app> 
    <span ng-click="myFilter = {type: 1}">Type 1</span> | 
    <span ng-click="myFilter = {type: 2}">Type 2</span> | 
    <span ng-click="myFilter = null">No filter</span> 
    <ul ng-controller="Test"> 
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li> 
    </ul> 
</div> 

function Test($scope) { 
    $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}]; 
} 

공지하고,이 ng-repeat 필터에 바인딩 된 것이다. Fiddle here. 새 필터를 만들 수도 있지만이 방법이 훨씬 좋습니다.

Answer 2

내 반응은 Caio 's와 매우 비슷합니다. 기존 배열을 필터링하는 방법을 보여 드리고자했습니다.

내 ng-repeat에는 단어를 검색하는 검색 필터가 있습니다. 탭에서 문자열 일치를 찾으려고했습니다. 그래서 추가 필터를 추가했습니다.

<tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter"> 
    <td>[[drink.name]]</td> 

내 테이블의 상단 부분 만 가지고 있지만 이것은 전략을 보여 주어야합니다. myFilter라는 두 번째 필터는 아래 단추에 연결됩니다.

<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button> 
</div> 
<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button> 
</div> 

각 버튼마다 myFilter를 통과하는 ng-click을 추가하고 drink.name으로 td를 검색 할 수 있습니다. 각 ng-click에서 검색 할 이름의 값을 설정할 수 있습니다. 따라서 소다 또는 에너지가 포함 된 모든 제목을 필터링 할 수 있습니다.