CODEWITHSUNDEEP
angularjs
JSAddict
JSAddict

Reputation: 12427

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

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

Upvotes: 1

Views: 5790

Answers (3)

Mark Rajcok
Mark Rajcok

Reputation: 364697

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) {
       ...

Upvotes: 2

Mathew Berg
Mathew Berg

Reputation: 28750

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

Upvotes: 4

Ganaraj
Ganaraj

Reputation: 26841

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.

Upvotes: 1

Related Questions