2013-09-13 3 views
86

Я пытаюсь отфильтровать список с несколькими фильтрами + с помощью специальной функции фильтра.Множественный фильтр AngularJS с функцией пользовательского фильтра

Исходный рабочий пример jsfiddle: http://jsfiddle.net/ed9A2/1/, но теперь я хочу изменить способ, которым является возраст.

Я хочу, чтобы добавить пользовательский фильтр так, чтобы возраст это фильтр на основе двух входных значений, который min_age и max_age (между возрастом).

После изучения документа. Я нашел людей с похожими вопросами, а пользователь Mark Rajcok ответил http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 выглядит хорошо и должен работать. Но у меня возникла проблема с его применением в моих кодах, в основном это связано с тем, что у меня есть несколько разных фильтров.

Im очень новый AngularJS :(

Мои опробованы и НЕ работает скрипку здесь http://jsfiddle.net/ed9A2/20/

Копию паста из моих НЕ рабочих кодов здесь

Посмотреть

<div ng-app ng-controller="MainController"> 
<table class="fancyTable"> 
    <tr> 
     <th>Player id</th> 
     <th>Player name</th> 
     <th>Age</th> 
    </tr> 
    <tr> 
     <td><input ng-model="player_id" /></td> 
     <td><input ng-model="player_name" /></td> 
     <td> 
      Min Age:<input ng-model="min_age" /> 
      Max Age:<input ng-model="max_age" /> 
     </td> 
    </tr> 
    <tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}"> 
     <td>{{player.id}}</td> 
     <td>{{player.name}}</td> 
     <td>{{player.age}}</td> 
    </tr> 
</table> 

Контролер

function MainController($scope) { 

$scope.player_id = ""; 
$scope.player_name = ""; 
$scope.player_age = ""; 
$scope.min_age = 0; 
$scope.max_age = 999999999; 

$scope.ageFilter = function(player) { 
    return (player > $scope.min_age && player.age < $scope.max_age); 
} 

$scope.players = [ 
     {"name": "Rod Laver", 
      "id": "rod", 
      "date": "1938/8/9", 
      "imageUrl": "img/rod-laver.gif", 
      "age": 75}, 
     {"name": "Boris Becker", 
      "id": "borix", 
      "date": "1967/11/22", 
      "imageUrl": "img/boris-becker.gif", 
      "age": 45}, 
     {"name": "John McEnroe", 
      "id": "mcenroe", 
      "date": "1959/2/16", 
      "imageUrl": "img/john-mc-enroe.gif", 
      "age": 54}, 
     {"name": "Rafa Nadal", 
      "id": "nadal", 
      "date": "1986/5/24", 
      "imageUrl": "img/ndl.jpg", 
      "age": 27} 
    ] 
} 

ответ

181

Попробуйте это:

<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter"> 

$scope.ageFilter = function (player) { 
    return (player.age > $scope.min_age && player.age < $scope.max_age); 
} 
+0

Примечание: порядок работы слева направо. –

6

Надежда ниже ответ в этой ссылке поможет, Multiple Value Filter

И посмотрите на скрипке с примером

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]} 

fiddle

+0

этот возвращает весь результат, если он не находит искомый атрибут в списке, как я могу сделать, чтобы инвертировать это поведение и не возвращать результат, если это значение не существует в списке? –

Смежные вопросы