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 binations: "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 bined.

Does anyone have a suggestion?

Follows the plunker with the sample code:

Thanks!!

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 binations: "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 bined.

Does anyone have a suggestion?

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

Thanks!!

• javascript
• angularjs
• smart-table

Share Improve this question Follow asked Sep 18, 2014 at 22:23 tcandtcand 4311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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