Dynamic filter table in ng-repeat with checkboxes

Question

I am tying to filter my table by using checkboxes, I succeed doning this with radio buttons with the following code:

<label class="checkbox-inline" >
       <input type="radio" ng-model="term" value="HT1"/> HT1
       <input type="radio" ng-model="term" value="HT2"/> HT2
       <input type="radio" ng-model="term" value="VT1"/> VT1
       <input type="radio" ng-model="term" value="VT2"/> VT2
</label>
<tr ng-repeat="course in vm.courses|filter:term">

I realize that the same no not work when using checkboxes because all checkboxes gets the same ng-model. But how do I do this with checkboxes? I would like to use javascript and not angular if I have to use a script

I think you can create an angular filter (http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments) with arguments. You can bind checkbox with different ng-model and put it into your filter to customize filter. — Silvinus, May 31 '16 at 13:14

othman.Da · Answer 1 · 2016-05-31T14:02:45.387

2

try this :

<input type="checkbox" ng-model='filter1' ng-true-value="'filter1'" ng-false-value=''/> filter1
<input type="checkbox" ng-model='filter2' ng-true-value="'filter2'" ng-false-value=''/> filter2
<tr ng-repeat="course in vm.courses | filter:filter1 | filter:filter2">

or write a custom filter:

app.filter('myCustomFilter', function() {
return function(input, optional1,optional2) {
     var output;
     // Do filter work here
     return output;
    }
});

and use it the following:

<tr ng-repeat="course in vm.courses | myCustomFilter">

edited May 31 '16 at 14:02

answered May 31 '16 at 13:13

othman.Da

621
4
16

retry using `ng-true-value` directive and `ng-false-value` – othman.Da May 31 '16 at 13:19
Still don't work, the inspection tells me that ng-true-value is not allowed there – sacan May 31 '16 at 13:21
check the last edit I just forgot the double quotes, I tried the example and it worked. – othman.Da May 31 '16 at 13:32
Thank you, that worked! But you can't choose two checkboxes at the same time, do you have an idea how to solve that? – sacan May 31 '16 at 13:44
you should write your own custom filter – othman.Da May 31 '16 at 13:58

Dynamic filter table in ng-repeat with checkboxes

1 Answers1