it-swarm.com.ru

Фильтр Angular.js ng-repeat по свойству, имеющему одно из нескольких значений (ИЛИ значений)

Можно ли отфильтровать массив объектов так, чтобы значением свойства могло быть любое из нескольких значений (условие ИЛИ) без написания пользовательского фильтра

Это похоже на эту проблему - Angular.js ng-repeat: фильтр по одному полю

Но вместо

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

возможно ли сделать что-то подобное

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

для образца данных следующим образом

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

Я безуспешно пытался

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

Лучший способ сделать это - использовать функцию:

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

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

Кроме того, вы можете использовать ngHide или ngShow для динамического отображения и скрытия элементов на основе определенных критериев. 

85
Sherlock

Для меня это сработало, как указано ниже ..

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

25
Amol Aranke

Я вещь "нг-если" должен работать:

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

В HTML:

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

В угловых:

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

Вот способ сделать это, передавая дополнительный аргумент:

https://stackoverflow.com/a/17813797/4533488 (спасибо Денису Пшенову)

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

С бэкэндом: 

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

,.


И еще один способ с фильтром только в шаблоне:

https://stackoverflow.com/a/12528093/4533488 (спасибо Микелу)

<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>

6
aero

Я нашел более общее решение с наиболее угловатым нативным решением, которое я могу себе представить. По сути, вы можете передать свой собственный компаратор в функцию filterFilter по умолчанию. Вот Plunker также.

3
s.alem

Не сумев найти хорошего универсального решения, я сделал что-то свое. Я не проверял это для очень большого списка.

Он заботится о вложенных ключах, массивах или о чем угодно.

Вот GitHub и демо

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>
0
Raj Sharma