javascript - example - ng-repeat filter condition

Angular.js ng-repeat filter por propiedad que tiene uno de varios valores(OR de valores)

Question

¿Es posible filtrar una matriz de objetos, de manera que el valor de la propiedad puede ser de algunos valores (condición OR) sin escribir un filtro personalizado

Esto es similar a este problema - Angular.js ng-repeat: filtra por campo único

Pero en lugar de

<div ng-repeat="product in products | filter: { color: ''red'' }">

¿Es posible hacer algo como esto?

<div ng-repeat="product in products | filter: { color: ''red''||''blue'' }">

para una muestra de datos como sigue:

$scope.products = [
   { id: 1, name: ''test'', color: ''red'' },
   { id: 2, name: ''bob'', color: ''blue'' }
   /*... etc... */
];

He intentado sin éxito

<div ng-repeat="product in products | filter: { color: (''red''||''blue'') }">

Answer 1

Aquí hay una manera de hacerlo mientras se pasa un argumento extra:

https://stackoverflow.com/a/17813797/4533488 (gracias a 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>

Con el backend:

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

.

Y aún otra manera con un filtro en plantilla solamente:

https://stackoverflow.com/a/12528093/4533488 (gracias a 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>

Answer 2

Después de no poder encontrar una buena solución universal, hice algo propio. No lo he probado para una lista muy grande.

Se ocupa de las claves anidadas, matrices o casi cualquier cosa.

Aquí está el github y la demo

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>

Answer 3

En HTML:

<div ng-repeat="product in products | filter: colorFilter">

En Angular:

$scope.colorFilter = function (item) { 
  if (item.color === ''red'' || item.color === ''blue'') {
  return item;
 }
};

Answer 4

Encontré una solution más genérica con la solution más angulosa-nativa que puedo pensar. Básicamente, puede pasar su propio comparador a la función de filterFilter predeterminada. Aquí también es plunker .

Answer 5

La cosa "ng-if" debería funcionar:

<div ng-repeat="product in products" ng-if="product.color === ''red'' 
|| product.color === ''blue''">

Answer 6

La mejor manera de hacer esto es usar una función:

<div ng-repeat="product in products | filter: myFilter">

$scope.myFilter = function (item) { 
    return item === ''red'' || item === ''blue''; 
};

Alternativamente, puede usar ngHide o ngShow para mostrar y ocultar elementos de forma dinámica según un criterio determinado.

Answer 7

Para mí, funcionó como se indica a continuación ..

<div ng-repeat="product in products | filter: { color: ''red''} | filter: { color:''blue'' }">