CODEWITHSUNDEEP
angularjsionic-framework
Fraser
Fraser

Reputation: 14246

Angular filter by text input and checkbox

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

Upvotes: 0

Views: 3148

Answers (1)

Ilya Dmitriev
Ilya Dmitriev

Reputation: 1720

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"/>

Upvotes: 1

Related Questions