web-dev-qa-db-ja.com

複数の値のいずれか（値のOR）を持つプロパティによるAngular.js ng-repeatフィルター

プロパティの値がいくつかの値（OR条件）のいずれかになるようにオブジェクトの配列をフィルターすることは可能ですか？カスタムフィルターを記述することなく

これはこの問題に似ています- 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') }">
javascriptangularjsangularjs-ng-repeatangularjs-filter
56
Yogesh Mangaj

これを行う最良の方法は、関数を使用することです：

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

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

または、 ngHideまたはngShow を使用して、特定の基準に基づいて要素を動的に表示および非表示にすることができます。

91
Sherlock

私にとっては、以下のように機能しました。

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

私は「ng-if」が動作するはずです：

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

バックエンドで：

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

。

さらに、テンプレート内フィルターのみを使用する別の方法：

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

より一般的な solution が見つかりました。これは、私が考えることができる最も角度がネイティブなソリューションです。基本的に、デフォルトのfilterFilter関数に独自のコンパレーターを渡すことができます。 plunker も同様です。

3
s.alem

良い普遍的な解決策を見つけることができなかった後、私は自分のものを作りました。非常に大きなリストについてはテストしていません。

ネストされたキー、配列、またはほぼすべてを処理します。

github および 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>
0
Raj Sharma