Filtre multiple AngularJS avec fonction de filtre personnalisé

95

J'essaie de filtrer la liste avec plusieurs filtres + avec une fonction de filtre personnalisée.

L'exemple de travail original de jsfiddle est http://jsfiddle.net/ed9A2/1/ mais maintenant je veux changer la façon dont l'âge est filtré.

Je veux ajouter un filtre personnalisé afin que l' âge le filtre en fonction de deux valeurs d'entrée qui sont min_age et max_age , (entre l'âge).

Après avoir examiné doc. J'ai trouvé des personnes ayant des questions similaires et une réponse de Mark Rajcok de l'utilisateur http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 a l' air bien et devrait fonctionner. Mais j'ai du mal à l'appliquer dans mes codes, ce qui semble principalement parce que j'ai d'autres filtres multiples.

Je suis très nouveau sur AngularJS :(

Mon violon essayé et ne fonctionnant PAS est ici http://jsfiddle.net/ed9A2/20/

Un copier-coller de mes codes NON fonctionnels est ici

Vue

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

Manette

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}
    ]
}
cjmling
la source

Réponses:

197

Essaye ça:

<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);
}
zs2020
la source
7

J'espère que la réponse ci-dessous dans ce lien vous aidera, Filtre à valeurs multiples

Et jetez un oeil au violon avec l'exemple

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

violon

Nirmal Kumar VeluPillai
la source
celui-ci renvoie tout le résultat s'il ne trouve pas l'attribut recherché dans la liste, comment puis-je faire pour inverser ce comportement et ne renvoyer aucun résultat si la valeur n'existe pas dans la liste?
Zakaria Belghiti
0

Dans le fichier de vue (HTML ou EJS)

<div ng-repeat="item in vm.itemList  | filter: myFilter > </div>

et en contrôleur

$scope.myFilter = function(item) {
return (item.propertyA === 'value' || item.propertyA === 'value');
}
Shyamal Patel
la source