javascriptangularjsangularjs-ng-repeatangularjs-filter

AngularJS Custom Filter in ng-repeat Table


I can filter values in table (especific column) with this custom filter. Data come from an array of a multiple select input

Complete Example: http://jsfiddle.net/d1sLj05t/1/

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.isString(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.isString(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;
    } 
}]);
<tr ng-repeat="emp in empList | filterMultiple:{dept:selected}">    

Perfect when values exists like "sales" or "account", but when the value not exist in the table, return all data (when i choose "not" or combinate "not" and "sales"). I expected an empty result o just the selected values


Solution

  • I think you can accomplish what you want with a much simpler filter. You might want to try something like this instead:

    myApp.filter('filterMultiple',['$filter',function ($filter) {
        return function (items, keyObj) {
            //If the value isn't defined, don't filter at all.
            if (keyObj.value == undefined) {
                return items;
            }
            //Use javascript's native Array.filter() to get only the items that match.
            return items.filter(function(item) {
                //Keep any items whose specified attribute includes the selected value
                return item[keyObj.column].includes(keyObj.value);
            })
        }
    }]);
    

    And a slight change in your HTML:

    <tr ng-repeat="emp in empList | filterMultiple:{column:'dept', value:selected}"> 
    

    I'm not sure what you mean by " combinate 'not' and 'sales' ", but I think this will get you moving in the right direction.

    Here are some related links, in case you're not familiar with some of the things I'm doing in the code:

    Documentation for Array.filter -- MDN

    Array.filter is better than $filter('filter') -- StackOverflow

    Documentation for String.includes -- MDN