IT

각도(OR 연산)에서 여러 값을 필터링하는 방법JS

itgroup 2023. 3. 14. 21:33
반응형

각도(OR 연산)에서 여러 값을 필터링하는 방법JS

사용하고 싶다filterangular에서 여러 값을 필터링하려면 두 값 중 하나가 있으면 해당 값이 표시되어야 합니다.

예를 들어 다음과 같은 구조를 가지고 있습니다.

오브젝트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>

[편집(Edit)]링크는 각도 필터 작성입니다.

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

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

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

다음은 값 배열을 사용하여 데이터를 필터링하는 사용자 정의 필터의 구현입니다.키 배열과 단일 값을 모두 사용하여 여러 키 개체를 지원합니다.말한 바와 같이 각도가 없다JS API 각도JS 필터 Doc은 단일 값을 가진 여러 키 필터를 지원하지만 아래 사용자 지정 필터는 angular와 동일한 기능을 지원합니다.JS 및 값의 배열과 키의 배열과 단일 값의 조합도 지원합니다.아래에 코드 스니펫을 찾아주세요.

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" 커스텀필터를 실장했을 경우의 예를 다음에 나타냅니다.:::Fiddle 예::

오브젝트 배열에 따라 필터링하려면

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

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

그러나 개별 속성을 기준으로 필터링하고 모든 속성을 전체적으로 필터링하려면 다음과 같은 작업을 수행할 수 있습니다.

<tr ng-repeat="supp in $data | filter : filterObject |  filter : search">
Where "filterObject" is an object for searching an individual property and "Search" will search in every property globally.

~아툴

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

드디어 여기 플렁크러가 있다.

주의: 어레이에는 문자열, 숫자 등의 단순한 개체만 포함해야 합니다.

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

이 경우에도 하실 수 있습니다.ngIf「CHANGE MARGE:」

<div ng-repeat="p in [
 { name: 'Justin' }, 
 { name: 'Jimi' }, 
 { name: 'Bob' }
 ]" ng-if="['Jimi', 'Bob'].indexOf(e.name) > -1">
 {{ p.name }} is cool
</div>

중 빠른 것은 '아까운 방법'을 입니다.filterBy예를 들어 다음과 같습니다.

<input type="text" placeholder="Search by name or genre" ng-model="ctrl.search"/>   
<ul>
  <li ng-repeat="movie in ctrl.movies | filterBy: ['name', 'genre']: ctrl.search">
    {{movie.name}} ({{movie.genre}}) - {{movie.rating}}
  </li>
</ul>

좋은 점은 각도 필터가 여전히 활발하게 개발되고 유지되고 있는 꽤 인기 있는 라이브러리(GitHub에서는 약 26만 개의 별)이기 때문에, 그것을 프로젝트에 의존적으로 추가하는 것이 좋습니다.

이게 당신이 찾고 있는 거라고 생각해요.

<div>{{ (collection | fitler1:args) + (collection | filter2:args) }}</div>

이거 드셔보세요

var m = angular.module('yourModuleName');
m.filter('advancefilter', ['$filter', function($filter){
    return function(data, text){
        var textArr = text.split(' ');
        angular.forEach(textArr, function(test){
            if(test){
                  data = $filter('filter')(data, test);
            }
        });
        return data;
    }
}]);

2개의 어레이가 있다고 가정합니다.하나는 영화용이고 다른 하나는 장르용입니다.

는 그냥 , 하다, '필터'로 쓰면 요.filter:{genres: genres.type}

여기서 배열과 유형이 되는 장르는 장르에 대한 가치가 있다.

문자열과 기능(질문이 아닌 것은 알지만 검색해서 여기까지 왔습니다)을 위해 작성했습니다.확장할 수 있을지도 모릅니다.

String.prototype.contains = function(str) {
  return this.indexOf(str) != -1;
};

String.prototype.containsAll = function(strArray) {
  for (var i = 0; i < strArray.length; i++) {
    if (!this.contains(strArray[i])) {
      return false;
    }
  }
  return true;
}

app.filter('filterMultiple', function() {
  return function(items, filterDict) {
    return items.filter(function(item) {
      for (filterKey in filterDict) {
        if (filterDict[filterKey] instanceof Array) {
          if (!item[filterKey].containsAll(filterDict[filterKey])) {
            return false;
          }
        } else {
          if (!item[filterKey].contains(filterDict[filterKey])) {
            return false;
          }
        }
      }
      return true;
    });  
  };
});

사용방법:

<li ng-repeat="x in array | filterMultiple:{key1: value1, key2:[value21, value22]}">{{x.name}}</li>

각도 또는 필터 모듈

$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)

다음은 링크입니다.https://github.com/webyonet/angular-or-filter

저도 비슷한 상황이었어요.커스텀 필터를 쓰는 것은 나에게 효과가 있었다.이게 도움이 됐으면 좋겠네요!

JS:

App.filter('searchMovies', function() {
    return function (items, letter) {
        var resulsts = [];
        var itemMatch = new RegExp(letter, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if ( itemMatch.test(item.name) || itemMatch.test(item.genre)) {
                results.push(item);
            }
        }
        return results;
    };
});

HTML: 

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

다음은 테이블 jsfiddle에 대한 필터 및 지시문을 작성하는 방법의 예입니다.

디렉티브 get list(필터) 및 필터가 있는 테이블 작성

<div ng-app="autoDrops" ng-controller="HomeController">
<div class="row">
    <div class="col-md-12">
        <h1>{{title}}</h1>
        <ng-Multiselect array-List="datas"></ng-Multiselect>
    </div>
</div>
</div>

내가 너를 도와준다면 나는 기뻐

파티에 참가하기에는 너무 늦었지만 누군가에게 도움이 될 수도 있습니다.

첫 번째 속성으로 필터링한 후 두 번째 필터로 연결합니다.

$scope.filterd = $filter('filter')($scope.empList, { dept: "account" });
$scope.filterd = $scope.filterd.concat($filter('filter')($scope.empList, { dept: "sales" }));

다중 속성 필터로 작동 중인 바이올린 참조

옵션 1: Angular provided 필터 비교기 파라미터 사용

// declaring a comparator method
$scope.filterBy = function(actual, expected) {
    return _.contains(expected, actual); // uses underscore library contains method
};

var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];

// filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')(employees, {name: ['a','c']}, $scope.filterBy);

옵션 2: Angular provided 필터 비활성화 사용

var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];

// filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')($filter('filter')(employees, {name: '!d'}), {name: '!b'});

나의 솔루션

ng-repeat="movie in movies | filter: {'Action'} + filter: {'Comedy}"

가장 좋은 답은 다음과 같습니다.

filter:({genres: 'Action', genres: 'Comedy'}

언급URL : https://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs

반응형

'IT' 카테고리의 다른 글

react-redux 종속성을 설치하는 동안 오류가 발생했습니다.  (0) 2023.03.14
CSS에서는 h1과 h2의 글꼴사이즈를 어떻게 변경합니까?  (0) 2023.03.14
AngularJS: 폼이 유효하지 않은 필드를 판별할 수 있는 방법이 있습니까?  (0) 2023.03.14
React 내부에 Polymer를 사용할 수 있습니까?  (0) 2023.03.14
ng-change는 새로운 가치와 원래 가치를 가져옵니다.  (0) 2023.03.14

'IT'의 다른글

  • 현재글각도(OR 연산)에서 여러 값을 필터링하는 방법JS

관련글

댓글

티스토리툴바