AngularJS case filtre
Je voudrais filtrer les résultats.
Il y a une liste de vins, mon souhait, c'est quand pas de case à cocher est cochée, la liste de vin est affiché.
- alors que seulement 1 case est cochée, est affiché de la catégorie
- lorsque plus d'une case à cocher sont vérifiées les catégories connexes sont affichés
Je suis un débutant à AngularJS, j'ai essayé avec ng-modèle sans succès, voici le code sans ng-modèle associé à la fonction:
<html ng-app="exampleApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.wines = [
{ name: "Wine A", category: "red" },
{ name: "Wine B", category: "red" },
{ name: "wine C", category: "white" },
{ name: "Wine D", category: "red" },
{ name: "Wine E", category: "red" },
{ name: "wine F", category: "white" },
{ name: "wine G", category: "champagne"},
{ name: "wine H", category: "champagne" }
];
$scope.selectItems = function (item) {
return item.category == "red";
};
$scope.selectItems = function (item) {
return item.category == "white";
};
$scope.selectItems = function (item) {
return item.category == "champagne";
};
});
</script>
</head>
<body ng-controller="defaultCtrl">
<h4>red: <input type="checkbox"></h4>
<h4>white: <input type="checkbox"></h4>
<h4>champagne: <input type="checkbox"></h4>
<div ng-repeat="w in wines | filter:selectItems">
{{w.name}}
{{w.category}}
</div>
</body>
</html>Comment utiliser ng-model ou ng-changement d'associer une fonction à chaque case à cocher bouton pour avoir un filtrage en temps réel modèle??
Vous devez vous connecter pour publier un commentaire.
Je préfère utiliser
filtercomme$filterhtml:
Il existe plusieurs implémentations possibles. En voici un:
Ont un
$scope.filter = {}objet de tenir l'état de chaque filtre. E. g.{red: true, white: false...}.Associer chaque case avec la propriété correspondante à l'aide de
ng-model. E. g.:input type="checkbox" ng-model="filter['red']" />.Ont une fonction (par exemple
$scope.filterByCategory(wine)) qui décide si un vin doit être affiché ou non (basé sur le$scope.filterobjet).Utiliser cette fonction pour filtrer les éléments en fonction de leur catégorie. E. g.
<div ng-repeat="wine in wines | filter:filterByCategory">La
filterByCategoryfonction pourrait être mis en œuvre comme ceci:où
noFilter()est une fonction qui vérifie si il n'y a aucun filtre activé (et retournetruesi il n'y a aucun):Voir, aussi, cette courte démo.
Mise à JOUR:
J'ai créé une version modifiée, qui prend en charge plusieurs filtres (et pas seulement le filtrage par catégorie).
Fondamentalement, il détecte dynamiquement les propriétés disponibles (basé sur la première
wineélément), ajoute des contrôles (groupes de cases) pour l'application de filtres en fonction de chaque propriété et dispose d'un filtre personnalisé fonction:wineélément, en fonction de chaque propriété.wineéléments (voir ci-dessus).Voir, aussi, cette mise à jour de la démo.
wineset de comptage filtré vins.w.nameetw.category. Il se trouve simplement que les vins n'ont pas plus de propriétés, mais s'ils le faisaient, les propriétés supplémentaires ne seraient pas affichés. Je ne suis pas rien faire pour afficher toutes les propriétés, j'ai juste explicitement lier à celles que je suis intéressé.prop | filtersyntaxe est en effet AngularJS syntaxe spécifique. C'est la façon dont les filtres de travail (vous pourriez avoir une méthode à votre portée/contrôleur et de l'appeler comme vous l'avez dit, mais les filtres sont utilisés avec la|syntaxe).