[javascript] angularJS에서 여러 값을 필터링하는 방법 (또는 연산)

사용하고 싶습니다 filter각도 여러 값을 필터링하고 싶습니다. 값 중 하나가 있으면 표시해야합니다.

예를 들어이 구조가 있습니다.

객체 movie속성을 가지고 genres내가 대한 필터링 할 Action과Comedy .

할 수는 filter:({genres: 'Action'} || {genres: 'Comedy'})있지만 동적으로 필터링하려면 어떻게해야합니까? 예 :filter: variableX

필터링해야하는 장르 배열이있는 경우 variableX에서 어떻게 설정 $scope합니까?

나는 그것을 문자열로 구성 한 다음 할 수 eval()있지만 eval ()을 사용하고 싶지 않습니다 …

답변

그냥 사용자 정의 필터를 만들 것입니다. 그들은 그렇게 어렵지 않습니다.

angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies,genres) {
      var out = [];
      // Filter logic here, adding matches to the out var.
      return out;
    }
  });

주형:

<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>

링크 편집 : 각도 필터 만들기

업데이트 : 여기 내 제안에 대한 정확한 데모 가있는 바이올린 이 있습니다.

답변

컨트롤러 기능을 사용하여 필터링 할 수 있습니다.

function MoviesCtrl($scope) {

    $scope.movies = [{name:'Shrek', genre:'Comedy'},
                     {name:'Die Hard', genre:'Action'},
                     {name:'The Godfather', genre:'Drama'}];

    $scope.selectedGenres = ['Action','Drama'];

    $scope.filterByGenres = function(movie) {
        return ($scope.selectedGenres.indexOf(movie.genre) !== -1);
    };

}

HTML :

<div ng-controller="MoviesCtrl">
    <ul>
        <li ng-repeat="movie in movies | filter:filterByGenres">
            {{ movie.name }} {{ movie.genre }}
        </li>
    </ul>
</div>

답변

다음과 같이 배수 값이있는 경우 사용자 정의 필터를 만드는 것은 너무 과도 할 수 있습니다. 사용자 정의 비교기를 전달하면됩니다.

$scope.selectedGenres = "Action, Drama";

$scope.containsComparator = function(expected, actual){
  return actual.indexOf(expected) > -1;
};

그런 다음 필터에서 :

filter:{name:selectedGenres}:containsComparator

답변

다음은 값 배열을 사용하여 데이터를 필터링하는 사용자 지정 필터의 구현입니다. 배열 및 단일 키 값을 가진 여러 키 개체를 지원합니다. inangularJS API에서 언급했듯이 AngularJS 필터 Doc 은 단일 값을 가진 다중 키 필터를 지원하지만 아래의 사용자 정의 필터는 angularJS와 동일한 기능을 지원하며 값 배열 및 배열과 단일 키 값 조합을 지원합니다. 아래 코드 스 니펫을 찾으십시오.

myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
    var filterObj = {
        data:items,
        filteredData:[],
        applyFilter : function(obj,key){
            var fData = [];
            if (this.filteredData.length == 0)
                this.filteredData = this.data;
            if (obj){
                var fObj = {};
                if (!angular.isArray(obj)){
                    fObj[key] = obj;
                    fData = fData.concat($filter('filter')(this.filteredData,fObj));
                } else if (angular.isArray(obj)){
                    if (obj.length > 0){
                        for (var i=0;i<obj.length;i++){
                            if (angular.isDefined(obj[i])){
                                fObj[key] = obj[i];
                                fData = fData.concat($filter('filter')(this.filteredData,fObj));
                            }
                        }

                    }
                }
                if (fData.length > 0){
                    this.filteredData = fData;
                }
            }
        }
    };
    if (keyObj){
        angular.forEach(keyObj,function(obj,key){
            filterObj.applyFilter(obj,key);
        });
    }
    return filterObj.filteredData;
}
}]);

용법:

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

위의 “filterMutiple” 사용자 정의 필터 를 구현 한 바이올린 예제입니다 .
::: 바이올린 예 :::

답변

객체 배열을 필터링하려면 다음을 제공 할 수 있습니다

filter:({genres: 'Action', key :value }.

개별 속성은 해당 속성에 지정된 특정 필터로 필터링됩니다.

그러나 개별 속성별로 필터링하고 모든 속성을 전체적으로 필터링하려면 다음과 같이하십시오.

<tr ng-repeat="supp in $data | filter : filterObject |  filter : search">

스 니펫 확장

여기서 “filterObject”는 개별 속성을 검색하기위한 개체이며 “Search”는 모든 속성에서 전 세계를 검색합니다.

~ 아툴

답변

나는 그것에 시간을 보냈고 @ chrismarx 덕분에 angular의 기본값으로 filterFilter자신의 비교기를 전달할 수 있음을 알았습니다 . 여러 값에 대한 편집 된 비교기는 다음과 같습니다.

  function hasCustomToString(obj) {
        return angular.isFunction(obj.toString) && obj.toString !== Object.prototype.toString;
  }
  var comparator = function (actual, expected) {
    if (angular.isUndefined(actual)) {
      // No substring matching against `undefined`
      return false;
    }
    if ((actual === null) || (expected === null)) {
      // No substring matching against `null`; only match against `null`
      return actual === expected;
    }
    // I edited this to check if not array
    if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
      // Should not compare primitives against objects, unless they have custom `toString` method
      return false;
    }
    // This is where magic happens
    actual = angular.lowercase('' + actual);
    if (angular.isArray(expected)) {
      var match = false;
      expected.forEach(function (e) {
        e = angular.lowercase('' + e);
        if (actual.indexOf(e) !== -1) {
          match = true;
        }
      });
      return match;
    } else {
      expected = angular.lowercase('' + expected);
      return actual.indexOf(expected) !== -1;
    }
  };

그리고 DRY를위한 커스텀 필터를 만들고 싶다면 :

angular.module('myApp')
    .filter('filterWithOr', function ($filter) {
      var comparator = function (actual, expected) {
        if (angular.isUndefined(actual)) {
          // No substring matching against `undefined`
          return false;
        }
        if ((actual === null) || (expected === null)) {
          // No substring matching against `null`; only match against `null`
          return actual === expected;
        }
        if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
          // Should not compare primitives against objects, unless they have custom `toString` method
          return false;
        }
        console.log('ACTUAL EXPECTED')
        console.log(actual)
        console.log(expected)

        actual = angular.lowercase('' + actual);
        if (angular.isArray(expected)) {
          var match = false;
          expected.forEach(function (e) {
            console.log('forEach')
            console.log(e)
            e = angular.lowercase('' + e);
            if (actual.indexOf(e) !== -1) {
              match = true;
            }
          });
          return match;
        } else {
          expected = angular.lowercase('' + expected);
          return actual.indexOf(expected) !== -1;
        }
      };
      return function (array, expression) {
        return $filter('filter')(array, expression, comparator);
      };
    });

그런 다음 원하는 곳 어디에서나 사용할 수 있습니다.

$scope.list=[
  {name:'Jack Bauer'},
  {name:'Chuck Norris'},
  {name:'Superman'},
  {name:'Batman'},
  {name:'Spiderman'},
  {name:'Hulk'}
];


<ul>
  <li ng-repeat="item in list | filterWithOr:{name:['Jack','Chuck']}">
    {{item.name}}
  </li>
</ul>

마지막으로 plunkr이 있습니다.

참고 : 예상 배열에는 String , Number 등과 같은 간단한 객체 만 포함해야합니다 .

답변

angular.filter의 searchField 필터를 사용할 수 있습니다

JS :

$scope.users = [
 { first_name: 'Sharon', last_name: 'Melendez' },
 { first_name: 'Edmundo', last_name: 'Hepler' },
 { first_name: 'Marsha', last_name: 'Letourneau' }
];

HTML :

<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->