Filter by multiple boolean properties in angular js smart-table

Problem

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

Problem courtesy of: tcand

Solution

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');
         }
       }
     })
  }
};});
Solution courtesy of: laurent

Discussion

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

Discussion courtesy of: Josep

This recipe can be found in it's original form on Stack Over Flow.