web-dev-qa-db-fra.com

AngularJS: filtres personnalisés et ng-repeat

Je suis un débutant chez AngularJS et je suis en train de construire une petite application de location de voitures preuve de concept qui intègre certains JSON et restitue diverses parties de ces données via un ng-repeat, avec quelques filtres:

   <article data-ng-repeat="result in results | filter:search" class="result">
        <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header>
            <ul class="result-features">
                <li>{{result.carDetails.hireDuration}} day hire</li>
                <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
                <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
                <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
            </ul>
    </article>

    <h2>Filters</h2>

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails">
        <option value="">All</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="9">9</option>
    </select>

    <h4>Provider:</h4>
    Atlas Choice <input type="checkbox"  data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
    Holiday Autos <input type="checkbox"  data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
    Avis <input type="checkbox"  data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>

Maintenant, je veux créer un filtre personnalisé dans mon contrôleur, qui puisse parcourir les éléments de mon ng-repeat et ne renvoyer que les éléments répondant à certains critères - par exemple, je pourrais créer un tableau de valeurs basé sur les cases à cocher 'fournisseur' sont vérifiés, puis évalue chaque élément ng-repeat par rapport à celui-ci. Je ne peux tout simplement pas comprendre comment je ferais cela, en termes de syntaxe - quelqu'un peut-il aider?

Voici mon Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

angularjsng-repeatangular-filters
67
ParkerDigital

Si vous souhaitez exécuter une logique de filtre personnalisée, vous pouvez créer une fonction qui prend en argument l'élément de tableau et renvoie true ou false en fonction de son contenu dans les résultats de la recherche. Ensuite, transmettez-le à l'instruction filter comme vous le feriez pour l'objet search, par exemple:

JS:

$scope.filterFn = function(car)
{
    // Do some tests

    if(car.carDetails.doors > 2)
    {
        return true; // this will be listed in the results
    }

    return false; // otherwise it won't be within the results
};

HTML:

...
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">
...

Comme vous pouvez le voir, vous pouvez enchaîner plusieurs filtres. Par conséquent, l'ajout de votre fonction de filtre personnalisé ne vous oblige pas à supprimer le filtre précédent à l'aide de l'objet search (ils fonctionneront ensemble de manière transparente).

156
mirrormx

Si vous souhaitez toujours un filtre personnalisé, vous pouvez transférer le modèle de recherche au filtre:

<article data-ng-repeat="result in results | cartypefilter:search" class="result">

Où définition pour le cartypefilter peut ressembler à ceci:

app.filter('cartypefilter', function() {
  return function(items, search) {
    if (!search) {
      return items;
    }

    var carType = search.carType;
    if (!carType || '' === carType) {
      return items;
    }

    return items.filter(function(element, index, array) {
      return element.carType.name === search.carType;
    });

  };
});

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

34
orjan

Vous pouvez appeler plusieurs filtres de fonction dans le même filtre ng-repeat

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">
6
alvarodoune

L’un des moyens les plus simples de résoudre ce problème consiste à utiliser le $ qui est la recherche tout.

Voici un plunker qui montre qu'il fonctionne. J'ai changé les cases à cocher pour la radio (parce que je pensais qu'elles devraient être complémentaires) ..

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

Si vous voulez un moyen très spécifique de faire cela (au lieu de faire une recherche générique), vous devez utiliser des fonctions dans la recherche.

La documentation est ici

http://docs.angularjs.org/api/ng.filter:filter

2
ganaraj