Anguleux.js ng-filtre de répétition par propriété ayant une des valeurs multiples (ou des valeurs)
Est-il possible de filtrer un tableau d'objets, tels que la valeur de la propriété peut être de quelques valeurs (OU condition) sans écrire un filtre personnalisé
c'est similaire à ce problème - angulaire.js ng-repeat: filtre par champ unique
mais au lieu de
<div ng-repeat="product in products | filter: { color: 'red' }">
est-il possible de faire quelque chose comme ça
<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">
pour un échantillon de données comme suit-
$scope.products = [
{ id: 1, name: 'test', color: 'red' },
{ id: 2, name: 'bob', color: 'blue' }
/*... etc... */
];
j'ai essayé sans succès
<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">
7 réponses
la meilleure façon de faire ceci est d'utiliser une fonction:
<div ng-repeat="product in products | filter: myFilter">
$scope.myFilter = function (item) {
return item === 'red' || item === 'blue';
};
alternativement, vous pouvez utiliser nghide ou ngShow pour afficher et masquer dynamiquement des éléments basés sur un certain critère.
pour moi, cela a fonctionné comme indiqué ci-dessous..
<div ng-repeat="product in products | filter: { color: 'red'} | filter: { color:'blue' }">j'chose "ng-si" devrait fonctionner:
<div ng-repeat="product in products" ng-if="product.color === 'red'
|| product.color === 'blue'">
en HTML:
<div ng-repeat="product in products | filter: colorFilter">
En Angle:
$scope.colorFilter = function (item) {
if (item.color === 'red' || item.color === 'blue') {
return item;
}
};
Voici une façon de le faire en passant dans un argument supplémentaire:
https://stackoverflow.com/a/17813797/4533488 (merci à Denis Pshenov)
<div ng-repeat="group in groups">
<li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
<span>{{friend.name}}</span>
<li>
</div>
Avec le backend:
$scope.weDontLike = function(name) {
return function(friend) {
return friend.name != name;
}
}
.
et encore une autre façon avec un filtre dans le modèle seulement:
https://stackoverflow.com/a/12528093/4533488 (merci à mikel)
<div ng:app>
<div ng-controller="HelloCntl">
<ul>
<li ng-repeat="friend in friends | filter:{name:'!Adam'}">
<span>{{friend.name}}</span>
<span>{{friend.phone}}</span>
</li>
</ul>
</div>
j'ai trouvé une solution plus générique 151930920" avec la solution la plus angulaire-native que je puisse penser. Fondamentalement, vous pouvez passer votre propre comparateur à la fonction par défaut filterFilter . Voici plunker ainsi.
après n'avoir pas pu trouver une bonne solution universelle, j'ai fait quelque chose moi-même. Je ne l'ai pas testé pour une très grande liste.
il prend soin de clés imbriquées, tableaux ou à peu près n'importe quoi.
app.filter('xf', function() {
function keyfind(f, obj) {
if (obj === undefined)
return -1;
else {
var sf = f.split(".");
if (sf.length <= 1) {
return obj[sf[0]];
} else {
var newobj = obj[sf[0]];
sf.splice(0, 1);
return keyfind(sf.join("."), newobj)
}
}
}
return function(input, clause, fields) {
var out = [];
if (clause && clause.query && clause.query.length > 0) {
clause.query = String(clause.query).toLowerCase();
angular.forEach(input, function(cp) {
for (var i = 0; i < fields.length; i++) {
var haystack = String(keyfind(fields[i], cp)).toLowerCase();
if (haystack.indexOf(clause.query) > -1) {
out.push(cp);
break;
}
}
})
} else {
angular.forEach(input, function(cp) {
out.push(cp);
})
}
return out;
}
})
HTML
<input ng-model="search.query" type="text" placeholder="search by any property">
<div ng-repeat="product in products | xf:search:['color','name']">
...
</div>