CODEWITHSUNDEEP
javascriptjqueryangularjs
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

angular filter on search and checkbox

I have an angular app where I'm displaying a list of people. I have an input that I'm using to filter the list based on the string in the input.

Each person in the list also has an status string. I added a checkbox next to the string filter but I'm not sure how I can apply this to my filtering.

I'd like the string to filter on first/last name and the checkbox to filter on status

Full Fiddle code

the search filter is bound like this:

input type='text' ng-model='filterText'/>
<input type='checkbox'/> <!-- how do I get this to work -->
    <ul>
        <li ng-repeat='person in people | filter:filterText'>
            <span class=''>{{person.firstname}}</span>
            <span class=''>{{person.lastname}}</span> -
            <span class='color-oj'>{{person.status}}</span>

        </li>
    </ul>

$scope.people = [
        {firstname: 'abdul', lastname: 'ahmad', status: 'active'},
        {firstname: 'mahmud', lastname: 'samrai', status: 'active'},
        {firstname: 'gasser', lastname: 'badawi', status: 'inactive'},
        {firstname: 'ibtihaj', lastname: 'jasim', status: 'active'},
        {firstname: 'abudi', lastname: 'ahmad', status: 'inactive'},
        {firstname: 'ahmad', lastname: 'jasim', status: 'active'},
        {firstname: 'abdul', lastname: 'samrai', status: 'inactive'}
    ];

Upvotes: 1

Views: 1161

Answers (2)

Sean
Sean

Reputation: 480

If you have more than one field you can use a strict search.

<input type='checkbox' ng-model='search.isActive'/>
<input type='checkbox' ng-model='search.anotherField'/>

you make an object with the field names matching the fields on the object your are filtering

<li ng-repeat='person in people | filter:filterText | filter:search:strict '>

Upvotes: 1

Andy Gaskell
Andy Gaskell

Reputation: 31761

This code is based on your fiddle, which is a little different than what you have posted here.

First, give you checkbox a model:

<input type='checkbox' ng-model='active'/>

Second, change your filter slightly:

<li ng-repeat='person in people | filter:filterText | filter:{isActive:active} '>

Initially active is undefined so all people are displayed. Once you check the checkbox active will have a value and filter accordingly.

Demo Fiddle

Upvotes: 1

Related Questions