Filter by multiple boolean properties in angular js smart-table
I have the following situation: List of indicators, each of which has a property 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 would like to be able to filter using the following combinations: "All", "Major", "Differential", "Major and Differential", "Neither Significant nor Differential"
I tried using ng-model on the ng-repeat related element with | filter , but it messed up the pagination.
I couldn't think of how to use the st-search directive as I am filtering two properties together.
Does anyone have a suggestion?
Follows plunker with sample code: http://plnkr.co/edit/t9kwNUjyJ15CbLFFbnHb
Thank!!
source to share
The search is cumulative, so if you call a controller api search
with multiple, you will be able to add 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
will happen 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');
}
}
})
}
};});
source to share
This is how I will do it.
In your controller, define an array with possible parameters and a filter for each option, for example:
$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 selection using this array, for example:
<select ng-model='diffEssFilter' ng-options='option.value for option in options'>
</select>
And then in ng-repeat
use a filter that will be stored in diffEssFilter
, for example:
<tr ng-repeat="indicator in indicators | filter:diffEssFilter.filter">
What is it.
Working example
source to share