AngularJS: filtres personnalisés et ng-repeat
Je suis un internaute novice D'AngularJS et je suis en train de construire une petite application de validation de concept de location de voitures qui affiche quelques JSON et rend 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, £{{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 peut itérer au-dessus des éléments dans mon ng-répéter et retourner Seulement les éléments qui répondent à certains critères - par exemple, je pourrais créer un tableau de valeurs basé sur lequel 'provider' les cases à cocher sont vérifiées, puis évaluez chaque item ng-repeat par rapport à cela. J'ai juste ne peux pas savoir comment je le ferais que si, en termes de syntaxe peut aider quelqu'un?
Voici mon plongeur: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
4 réponses
si vous voulez exécuter une logique de filtre personnalisée, vous pouvez créer une fonction qui prend l'élément de tableau comme argument et retourne true ou false en fonction de si elle devrait être dans les résultats de recherche. Puis passez - le à l'instruction filter comme vous le faites avec 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 de nombreux filtres ensemble, donc l'ajout de votre fonction de filtre personnalisé ne vous oblige pas à supprimer le filtre précédent en utilisant l'objet search (ils fonctionneront ensemble de façon transparente).
si vous voulez toujours un filtre personnalisé, vous pouvez passer dans le modèle de recherche au filtre:
<article data-ng-repeat="result in results | cartypefilter:search" class="result">
où la définition de 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;
});
};
});
vous pouvez appeler plus de 1 filtres de fonction dans le même filtre de répétition de ng
<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">
une des façons les plus faciles de corriger ceci est d'utiliser le $ qui est la recherche Tout.
voici un plunker qui montre qu'il fonctionne. J'ai changé les cases à cocher en radio ( parce que j'ai pensé qu'elles devraient être complémentaires )..
http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview
si vous voulez une façon très spécifique de le faire ( au lieu de faire une recherche générique), vous devez travailler avec fonctions dans la recherche.
la documentation est ici