How to filter multiple values (OR operation) in angularJS

前端 未结 20 888
清酒与你
清酒与你 2020-11-22 10:01

I want to use the filter in angular and want to filter for multiple values, if it has either one of the values then it should be displayed.

I have for

相关标签:
20条回答
  • 2020-11-22 10:25

    Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned inangularJS API AngularJS filter Doc supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below,

    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;
    }
    }]);
    

    Usage:

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

    Here is a fiddle example with implementation of above "filterMutiple" custom filter. :::Fiddle Example:::

    0 讨论(0)
  • 2020-11-22 10:26

    Here is my example how create filter and directive for table jsfiddle

    directive get list (datas) and create table with filters

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

    my pleasure if i help you

    0 讨论(0)
  • 2020-11-22 10:28

    If you want to filter on Array of Objects then you can give

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

    Individual property will be filtered by particular filter given for that property.

    But if you wanted to something like filter by individual Property and filter globally for all properties then you can do something like this.

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

    ~Atul

    0 讨论(0)
  • 2020-11-22 10:28

    you can use searchField filter of angular.filter

    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 -->
    
    0 讨论(0)
  • 2020-11-22 10:29

    You can also use ngIf if the situation permits:

    <div ng-repeat="p in [
     { name: 'Justin' }, 
     { name: 'Jimi' }, 
     { name: 'Bob' }
     ]" ng-if="['Jimi', 'Bob'].indexOf(e.name) > -1">
     {{ p.name }} is cool
    </div>
    
    0 讨论(0)
  • 2020-11-22 10:29

    Please try this

    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;
        }
    }]);
    
    0 讨论(0)
提交回复
热议问题