Filter by multiple boolean properties in angular js smart-table

Question

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

score 4 · Accepted Answer · answered Sep 24 '14 at 08:13

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

Thanks @laurent! It works like a charm and now I understand how it works! I'm able to continue from here! — tcand, Oct 01 '14 at 15:05
what if one would like to filter on *every props in a subset*. I'm trying to filter on multiple **explicit properties** at the same time. — Cyril CHAPON, Oct 05 '15 at 10:54

score 0 · Answer 2 · answered Sep 19 '14 at 02:08

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

I thought of that, but in this specific case that won't work because it ruins the **smart-table** pagination. It looks like the page count doesn't update when I don't use **st-search** for filtering :/ — tcand, Sep 22 '14 at 02:56
@tcand sorry, I'm not very familiar with the 'smart-table' and in the plunker that I've set everything seems to be working fine, so I don't quite understand what the issue is, however if you want to provide me with a plunker were I can see your issue replicated, I will try to help you to solve that issue. Thanks! — Josep, Sep 22 '14 at 03:00

Filter by multiple boolean properties in angular js smart-table

2 Answers2

Working example