web-dev-qa-db-fra.com

AngularJS filtre multiple avec fonction de filtre personnalisée

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

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

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

Après avoir regardé dans doc. J'ai trouvé des personnes qui avaient des questions similaires et un utilisateur, Mark Rajcok, qui répondait 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 être dû au fait que j’ai d’autres filtres multiples.

Je suis très nouveau sur AngularJS :(

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

Un copier/coller de mes codes NOT working 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}
    ]
}
javascriptangularjsangularjs-ng-repeat
93
cjmling

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

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

Et jetez un coup d'œil au violon avec l'exemple

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

violon

7
Nirmal Kumar VeluPillai

Dans le fichier de vue (HTML ou EJS)

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

et dans le contrôleur

$scope.myFilter = function(item) {
return (item.propertyA === 'value' || item.propertyA === 'value');
}
0
user3578882