Angular filter by text input and checkbox

Question

I have an ng repeat that I'm successfully filtering by an input. I also have 3 checkboxes relating to the data that I want to be able to use to filter out certain results. I've tried putting all the fields in an array (in the same manner that you'd orderBy) but this doesn't appear to help.

How can I achieve my desired result?

My template looks like:

<input ng-model="searchByName.name" type="text" placeholder="Search by name" autofocus>
<ul class="list">
    <li class="item item-toggle">
       ATM
         <input type="checkbox" value="1" ng-model="hasATM.atm">
    </li>
    <li class="item item-toggle">
       Power
         <input type="checkbox" value="1" ng-model="hasPower.power">
    </li>
    <li class="item item-toggle">
       Water
         <input type="checkbox" value="1" ng-model="hasWater.water">
    </li>
</ul>


<ion-list>
    <ion-item class="item-remove-animate item-icon-right" ng-repeat="harbour in harbours | filter:[searchByName, hasATM, hasPower, hasWater] | orderBy:[sortOption, 'distance']" type="item-text-wrap" href="#/tab/harbours/{{harbour.id}}">
        <h2>{{harbour.name}}</h2>
    </ion-item>
</ion-list>

And my data is in the format of:

"harbours": [
        {
        "id": 3,
        "name": "Lorem",
        "latitude": 51.000000,
        "longitude": 0.000000,
        "mooring": 3,
        "swimming": 2,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 3,
        "noise": 1,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": "lorem ipsum",
        "image":"tmp.jpg"
      }, {
        "id": 4,
        "name": "Ipsum",
        "latitude": 52.00000,
        "longitude": 0.00000,
        "mooring": 3,
        "swimming": 4,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 1,
        "noise": 5,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": ""
      }
]

Using just "searchByName" as my filter (not in the array) works great but when I try and use any of the checkboxes by themselves, the datalist just disappears.

"searchByName" when used in the array makes the list disappear too so I'm assuming this can't be achieved as simply as I'd hoped.

How can I achieve the search by name and checkbox filtering?

Thank you

create a custom filter

charlietfl
– charlietfl

2015-09-27 17:32:31 +00:00
Commented Sep 27, 2015 at 17:32 — charlietfl
– charlietfl, Commented Sep 27, 2015 at 17:32

Ilya Dmitriev · Accepted Answer · 2015-09-27 19:48:27Z

1

I think, that it's much easier to store all your filters in one object (For example, I'll use yourFilter variable in the example). With this approach you can just pass your variable to filter.

The next issue here, that your checkboxes store false or true value, because value tag, which you applied to them, doesn't have any effect. And if you choose one of the checkboxes, any result won't be found, because all your boolean fields has 0 or 1 value. To change format of stored value of the checkboxes you should refactor them with ng-true-value and ng-false-value, so that they can be used to filter your data.

After that your template with search inputs will look like this:

<input type="text" ng-model="yourFilter.name" placeholder="Search by name"/>
<ul>
  <li>
   ATM
   <input type="checkbox" ng-model="yourFilter.atm" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Power
   <input type="checkbox" ng-model="yourFilter.power" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Water
   <input type="checkbox" ng-model="yourFilter.water" ng-true-value="1" ng-false-value="0"/>
  </li>
</ul>

<ul>
  <li ng-repeat="harbour in harbours | filter:yourFilter">
    <h2>{{harbour.name}}</h2>
  </li>
</ul>

Example on plunker.

Documentation about input[checkbox].

Remember, that after loading the page the checkboxes don't have any effect on filtered results. And if you want to filter by their default value, you should use ng-init directive.

<input type="checkbox" ng-model="yourFilter.water" ng-init="yourFilter.water = '0'" ng-true-value="1" ng-false-value="0"/>

edited Sep 27, 2015 at 19:48

answered Sep 27, 2015 at 19:27

Ilya Dmitriev

1,7401 gold badge17 silver badges22 bronze badges

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

4 Comments

Fraser Over a year ago

Too easy :) You're a genius. Thanks!

Fraser Over a year ago

On the same topic. Is there anyway to have the false value be a wildcard so when you uncheck the checkbox you get the atm/power/water values matching 1 OR 0?

Ilya Dmitriev Over a year ago

@Fraser, to be honest, I don't know. And maybe it's a little bit tricky, it'll be better to create a custom filter to filter data in this way. Or you can move this logic to a function in your controller. In this function you can format your filter object in any way. I've created a plunker here. Have a look at formatFilterInANiceWay function which is used to format required object for filter and you can use it in this way: <li ng-repeat="harbour in harbours | filter: ctrl.formatFilterInANiceWay(yourFilter)">.

Ilya Dmitriev Over a year ago

Here is an example with custom filter. It should be refactored, but I hope that you'll get the idea.

Collectives™ on Stack Overflow

Angular filter by text input and checkbox

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related