How to Implement Excel Like Filter in angularjs?

Question

I Need to Implement simple Excel Like Filer for table using angulajs(v.1) I\'m getting stuck please help me, I have added my code snippet below. I want to show filtered Data in

Answer 1

We want to

1. Show a list of unique country names with check-boxes to select from.
2. Filter the country list by counrtySearch text-field
3. Filter the employees by counrtySearch text-field and selected check-boxes.

Step 1:

First we need to create a mapping of unique country names. We need a list of unique country names (for iteration) and a dictionary of unique country names (for easy access without looping). The following function returns both.

function categorize(arr, field) {
    var o = {}, r = [], i, l = arr.length;
    for (i = 0; i < l; i += 1) {
        if(o[arr[i][field]])continue;
        var _o = {name:arr[i][field], checked:true};
        o[arr[i][field]] = _o;
        r.push(_o);
    }
    return {list:r, dict:o};
};

Step 2:

To filter country-list by countrySearch add a countryFilter and bind ng-model to checkboxes.

     
    {{country.name}}

$scope.countryFilter = function (country) {
    return $scope.countrySearch.length == 0 ? true : country.name.match(new RegExp($scope.countrySearch,'i'));
};

Step 3:

To filter employees by countrySearch and selected check-boxes add the following filter.

    {{emp.Country}}
    {{emp.Name}}
    {{emp.City}}

$scope.rowFilter = function (item) {
    return $scope.Countries.dict[item.Country].checked && ($scope.countrySearch.length?item.Country.match(new RegExp($scope.countrySearch,'i')):true);
};

For batch select add this method to scope and call markAll(true) to select all, markAll(false) to select none.

$scope.markAll=(b)=>{
    $scope.Countries.list.forEach(function(x){x.checked=b;});
}

Working Snippet:

var myApp = angular.module('myApp', [])
.controller('employeeController', function ($scope) {
    $scope.countrySearch = "";
    $scope.employees = employees;
    $scope.Countries = categorize(employees, 'Country');
    $scope.countryFilter = function (country) {
        return $scope.countrySearch.length ? country.name.match(new RegExp($scope.countrySearch,'i')):true;
    };
    $scope.rowFilter = function (item) {
        return $scope.Countries.dict[item.Country].checked && ($scope.countrySearch.length?item.Country.match(new RegExp($scope.countrySearch,'i')):true);
    };
    $scope.markAll=(b)=>{
        $scope.Countries.list.forEach(function(x){x.checked=b;});
    }
})

function categorize(arr, field) {
    var o = {}, r = [], i, l = arr.length;
    for (i = 0; i < l; i += 1) {
        if(o[arr[i][field]])continue;
        var _o = {name:arr[i][field], checked:true};
        o[arr[i][field]] = _o;
        r.push(_o);
    }
    return {list:r, dict:o};
};

var employees = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
}, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
}, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
}, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
}, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
}, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "France"
}, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
}, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Canada"
}];

.changeType {
  background: #eee;
  border-radius: 2px;
  border: 1px solid #bbb;
  color: #bbb;
  font-size: 10px;
  line-height: 9px;
  padding: 4px;
  float: right;
}

.changeType:before {
  content: "\25BC ";
}

  

    

      

        {{error}}
        

          

            

              

                
Country
                  

                    
                    

                      

                        

                          

                            

                              Close(X)
                              

                                Filter by value
                                
                                

                                  

                                    

                                      
Select All | Select None
                                    
                                  
                                
                                

                                  

                                    

                                      

                                        

                                           {{country.name}}
                                        

                                      
                                    
                                  
                                
                              
                            
                          
                        
                      
                    
                  
                
                
Name
                
City
              
            
            

              

                
{{emp.Country}}
                
{{emp.Name}}
                
{{emp.City}}
              
            
          
        
      
    
  

Modifying it slightly we can apply filter to multiple columns

var myApp = angular.module('myApp', [])
  .controller('employeeController', function($scope) {
    $scope.XLfilters = {
      list: [],
      dict: {}
    };
    $scope.markAll = function(field, b) {
      $scope.XLfilters.dict[field].list.forEach((x) => {x.checked=b;});
    }
    $scope.clearAll = function(field) {
      $scope.XLfilters.dict[field].searchText='';
      $scope.XLfilters.dict[field].list.forEach((x) => {x.checked=true;});
    }
    $scope.itemFilter = function(field) {
      var xfilter = $scope.XLfilters.dict[field];
      if (xfilter.searchText.length == 0) return xfilter.list;
      var rxp = new RegExp(xfilter.searchText, 'i');
      return xfilter.list.filter(function(item) {
        return item.name.match(rxp);
      });
    };
    $scope.rowFilter = function(item) {
      var visible = true;
      for(var cat,i=0,l=$scope.XLfilters.list.length;i

.changeType {
  background: #eee;
  border-radius: 2px;
  border: 1px solid #bbb;
  color: #bbb;
  font-size: 10px;
  line-height: 9px;
  padding: 4px;
  float: right;
}

.changeType:before {
  content: "\25BC ";
}

.options {
  height: 150px;
  overflow-y: scroll;
}

a.filterlink{
  font-size: 12px;
}

  

    

      

        
Country
          

            
            

              

                Clear All | Close(X)
              
              

                
                

                  Select All | Select None
                
                

                  

                    

                       {{item.name}}
                    
                  
                
              
            
          
        
        
City
          

            
            

             

               Clear All | Close(X)
             
             

                
                

                  Select All | Select None
                
                

                  

                    

                       {{item.name}}
                    
                  
                
              
            
          
        
        
Name
      
    
    

      

        
{{emp.Country}}
        
{{emp.City}}
        
{{emp.Name}}
      
    
  

Angular digest cycle optimized multiple column filtering:

var myApp = angular.module('myApp', [])
  .controller('employeeController', function($scope) {
    $scope.XLfilters = { list: [], dict: {}, results: [] };
    $scope.markAll = function(field, b) {
      $scope.XLfilters.dict[field].list.forEach((x) => {x.checked=b;});
    }
    $scope.clearAll = function(field) {
      $scope.XLfilters.dict[field].searchText='';
      $scope.XLfilters.dict[field].list.forEach((x) => {x.checked=true;});
    }
    $scope.XLfiltrate = function() {
    	var i,j,k,selected,blocks,filter,option, data=$scope.XLfilters.all,filters=$scope.XLfilters.list;
      $scope.XLfilters.results=[];
      for (j=0; j0||selected>0;
      }
      for (i=0; i{x.visible=true});
        }
      }
      for (j=0; j

.filterdropdown{
  background: #eee;
  border: 1px solid #bbb;
  color: #bbb;
  border-radius: 2px;
  font-size: 14px;
  line-height: 14px;
}
.filterdropdown.active{
  color: #005b9c;
}
a.filterlink{
  font-size: 12px;
}
.options {
  height: 150px;
  overflow-y: scroll;
}

  

    

      

        
Country
          

            
            

              

                Clear All | Close(X)
              
              

                
                

                  Select All | Select None
                
                

                  

                    

                       {{item.title}}
                    
                  
                
              
            
          
        
        
City
          

            
            

              

                Clear All | Close(X)
              
              

                
                

                  Select All | Select None
                
                

                  

                    

                       {{item.title}}
                    
                  
                
              
            
          
        
        
Name
      
    
    

      

        
{{emp.Country}}
        
{{emp.City}}
        
{{emp.Name}}