CODEWITHSUNDEEP
javascriptangularjssmart-table
tcand
tcand

Reputation: 43

Filter by multiple boolean properties in angular js smart-table

I have the following situation: A list of indicators, each of them having the properties name, description, essential and differential.

$scope.indicators = [
  { name: 'indicator1' , description: 'blah1', essential: true, differential: false },
  { name: 'indicator2' , description: 'blah2', essential: false, differential: true },
  { name: 'indicator3' , description: 'blah3', essential: true, differential: true },
  { name: 'indicator4' , description: 'blah4', essential: false, differential: false }    
]

I'd like to be able to filter with a select the following combinations: "All", "Essential", "Differential", "Essential and Differential", "Neither Essential nor Differential"

I have tried using ng-model in the select associated with the ng-repeat with | filter, but that ruined the pagination.

I couldn't think of way of using the st-search directive since I'm filtering two properties combined.

Does anyone have a suggestion?

Follows the plunker with the sample code: http://plnkr.co/edit/t9kwNUjyJ15CbLFFbnHb

Thanks!!

Upvotes: 4

Views: 5807

Answers (2)

laurent
laurent

Reputation: 2620

The search are cumulative, so if you call the controller api search with multiple you will be able to add the predicates.

Just make sure to reset the sortPredicate object whenever the value changes.

this plunker shows how to write a plugin with your requirements (although I don't understand what all would be in this context

.directive('customSearch',function(){
return {
  restrict:'E',
  require:'^stTable',
  templateUrl:'template.html',
  scope:true,
  link:function(scope, element, attr, ctrl){
     var tableState=ctrl.tableState();
     scope.$watch('filterValue',function(value){
       if(value){
         //reset
         tableState.search.predicateObject ={};

         if(value==='essential'){
           ctrl.search('true', 'essential');
         } else if(value === 'differential'){
           ctrl.search('true', 'differential')
         } else if(value === 'both'){
           ctrl.search('true','essential');
           ctrl.search('true', 'differential');
         } else if(value === 'neither'){
            ctrl.search('false','essential');
            ctrl.search('false', 'differential');
         }
       }
     })
  }
};});

Upvotes: 4

Josep
Josep

Reputation: 13071

This is how I would do it.

In your controller define an Array with the possible options and the filter for each option, like this:

     $scope.options = [
        {value:'All', filter:{}},
        {value:'Essential', filter:{essential:true}},
        {value:'Differential', filter:{differential:true}},
        {value:'Essential and Differential', filter:{differential:true, essential:true}},
        {value:'Neither Essential nor Differential', filter:{differential:false, essential:false}}
     ];

Then in your html declare your select using this array, like this:

        <select ng-model='diffEssFilter' ng-options='option.value for option in options'>
        </select>

And then in your ng-repeat use the filter that would be stored in diffEssFilter, like this:

<tr ng-repeat="indicator in indicators | filter:diffEssFilter.filter">

That's it.

Working example

Upvotes: 0

Related Questions