how to filter text based on checkbox value using angular filters?

Question

View By :
<input type="checkbox" name="filter" />All
<input type="checkbox" name="filter" />name
<input type="checkbox" name="filter" />type

<span class="displayphones">{{ phone | filter:? }}</span>

here i have 3 check boxes, by default it has to display all. while selecting the checkbox, it

should display the appropriate results but i dont know how to pass the checkbox value to filters without repeating ng-model like this

View By :
<input type="checkbox" name="filter" ng-model="all" />All
<input type="checkbox" name="filter" ng-model="name" />name
<input type="checkbox" name="filter" ng-model="type" />type

<span class="displayphones">{{ phone | filter:all:name:type }}</span>

is it possible to do this in some other way???

Why is having 3 ng-models a problem? Normally, in Angular, each form element has its own ng-model. — Mark Rajcok
– Mark Rajcok, Commented Dec 20, 2012 at 22:21
actually having 3 ng-model is not my problem. i want to pass all of the ng-model values as an array. — JSAddict
– JSAddict, Commented Dec 21, 2012 at 4:05

Mathew Berg · Accepted Answer · 2012-12-20 15:47:54Z

4

You can use the data-ng-true-value to accomplish what you want. It can even be used for checkboxes:

<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="1" /><br >
<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="2" /><br >
<input type="checkbox" data-ng-model="myCheckboxGroup" data-ng-true-value="3" /><br >

{{myCheckboxGroup}}

Here are the docs on it: http://docs.angularjs.org/api/ng.directive:input.checkbox

answered Dec 20, 2012 at 15:47

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JSAddict Over a year ago

no in this way one value will be updated by other one. it will almost like radio buttons. i need some other way.

JSAddict Over a year ago

will it be possible to get all the values selected by the user with that single data-ng-model?

Mathew Berg Over a year ago

No, a data-ng-model is just a specific value, not an array.

Mathew Berg Over a year ago

Let's use input type text as an example of why this won't be possible. I have three of them each with the same ng-model. If i type in one it will update the other two right? I will not be able to get them to "join" into an array unless I specify the ng-model for each one of them as unique.

Mathew Berg Over a year ago

Create your own custom filter that you can pass an object too and then you can have

<input type="checkbox" data-ng-model="myCheckboxGroup.all" data-ng-true-value="1" /><br >  <input type="checkbox" data-ng-model="myCheckboxGroup.name" data-ng-true-value="2" /><br >  <input type="checkbox" data-ng-model="myCheckboxGroup.type" data-ng-true-value="3" /><br >

then in your filter: {{ phone | customFilter:myCheckboxGroup }}

|

Mark Rajcok · Accepted Answer · 2012-12-20 22:37:32Z

2

Controller:

function MyCtrl($scope) {
   $scope.filters = [ 
      {name: 'All',  selected: false},
      {name: 'name', selected: false},
      {name: 'type', selected: false}];    
}

View:

<div ng-controller="MyCtrl">
   <div ng-repeat="filter in filters">
      <input type="checkbox" ng-model="filter.selected" name="filter">{{filter.name}}
   </div>
   debug: {{filters}}
   <br><span class="displayphones">{{ phone | customFilter:filters }}</span>

I don't know what your phone data looks like, so the filter implementation is left as an exercise for the reader:

myApp.filter('customFilter', function() {
    return function(phone, filters) {
       ...

answered Dec 20, 2012 at 22:37

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Comments

Ganaraj · Accepted Answer · 2012-12-20 14:40:35Z

1

The reason you are not getting it right is probably because you are not using the right UI element for your use case. The right UI element would be a radio input instead of a checkbox. A radio group is a toggle while a check box is not.

If you use a radio input the same is pretty easy to achieve :

<input type="radio" ng-model="filterType" value="All" />All
<input type="radio" ng-model="filterType" value="name" />name
<input type="radio" ng-model="filterType" value="type" />type

<span class="displayphones">{{ phone | filter:filterType }}</span>

That is it. Now you are good to go. Hope this helps. If you really want to work with a checkbox then its a bit more complicated than this.

answered Dec 20, 2012 at 14:40

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Collectives™ on Stack Overflow

how to filter text based on checkbox value using angular filters?

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related