javascript - crear - Filtro múltiple AngularJS con función de filtro personalizada

filter pipe angularjs

Question

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

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

Deseo 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 años).

Después de mirar doc. Encontré gente que tiene preguntas similares y un usuario Mark Rajcok que responde http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 ve bien y debería estar funcionando. Pero estoy teniendo problemas para aplicarlo en mis códigos, lo que parece principalmente 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/

Copia y pega de mis códigos de NO funcionamiento 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}
    ]
}

Answer 1

La esperanza debajo de la respuesta en este enlace ayudará, filtro de valor múltiple

Eche un vistazo al violín con el ejemplo

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

fiddle

Answer 2

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