Filtro múltiple AngularJS con función de filtro personalizado


95

Estoy tratando de filtrar la lista con varios filtros + con una función de filtro personalizada.

El ejemplo original de jsfiddle en funcionamiento es http://jsfiddle.net/ed9A2/1/ pero ahora quiero cambiar la forma en que se filtra la edad.

Quiero agregar un filtro personalizado para que la edad se filtre en función de dos valores de entrada, que son min_age y max_age , (entre edades).

Después de buscar en doc. Encontré personas que tienen preguntas similares y un usuario Mark Rajcok responde http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 se ve bien y debería estar funcionando. Pero tengo problemas para aplicarlo en mis códigos, lo que parece ser porque tengo otros filtros múltiples.

Soy muy nuevo en AngularJS :(

Mi violín probado y que NO funciona está aquí http://jsfiddle.net/ed9A2/20/

Una copia y pegado de mis códigos que NO funcionan están aquí

Ver

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

Controlador

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

Respuestas:


197

Prueba esto:

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

7

Espero que la respuesta a continuación en este enlace ayude, Filtro de valor múltiple

Y echa un vistazo al violín con el ejemplo

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

violín


este devuelve todo el resultado si no encuentra el atributo buscado en la lista, ¿cómo puedo hacer para invertir este comportamiento y no devolver ningún resultado si el valor no existe en la lista?
Zakaria Belghiti

0

En vista de archivo (HTML o EJS)

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

y en el controlador

$scope.myFilter = function(item) {
return (item.propertyA === 'value' || item.propertyA === 'value');
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.