Angular.js ng-repeat 필터는 여러 값 중 하나를 갖는 속성 (값의 OR)

Angular.js ng-repeat 필터는 여러 값 중 하나를 갖는 속성 (값의 OR)

---

사용자 지정 필터를 작성하지 않고 속성 값이 몇 가지 값 (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') }">

---

이를 수행하는 가장 좋은 방법은 함수를 사용하는 것입니다.

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

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

또는 ngHide 또는 ngShow 를 사용 하여 특정 기준에 따라 요소를 동적으로 표시하고 숨길 수 있습니다 .

---

저에게는 아래와 같이 작동했습니다 ..

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

---

"ng-if"가 작동해야합니다.

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

---

HTML에서 :

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

Angular에서 :

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

---

다음은 추가 인수를 전달하는 동안 수행하는 방법입니다.

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>

---

저는 제가 생각할 수있는 가장 각진 네이티브 솔루션 으로 더 일반적인 솔루션 을 찾았습니다 . 기본적으로 자신의 비교기를 기본 filterFilter기능에 전달할 수 있습니다 . 여기 플런 커도 있습니다.

---

좋은 보편적 인 해결책을 찾지 못한 후에 나는 내 자신의 것을 만들었습니다. 나는 그것을 매우 큰 목록에 대해 테스트하지 않았습니다.

중첩 된 키, 배열 또는 거의 모든 것을 처리합니다.

다음은 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>

ReferenceURL : https://stackoverflow.com/questions/21987904/angular-js-ng-repeat-filter-by-property-having-one-of-multiple-values-or-of-val