Search Box Exampl

ionic-v1
1

I have the following markup

<ion-view view-title="Troops">
<div class="bar bar-subheader item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="troop.first">
    </label>
    <button class="button button-clear button-positive" ng-click="cancelSearch()">
        Cancel
    </button>
</div>
<ion-content class="has-subheader">
    <ion-list>
        <ion-item ng-repeat="troop in troops | filter:troop" href="#/app/troops/{{troop.id}}" on-hold="deleteTroop(troop.id)">
            {{troop.rank}} {{troop.first}} {{troop.last}}
        </ion-item>
    </ion-list>
</ion-content>
<div class="bar bar-footer bar-positive">
    <button class="button button-clear pull-left icon ion-paper-airplane" ng-click="sendMessageBlast()"></button>
    <div class="title">{{numberOfTroops}}</div>
    <button class="button button-clear pull-right icon ion-plus" ng-click="addNewTroop()"></button>
</div>

This works but it will only filter by troop.first. I would like to be able to have it also filter by troop.last or troop.ran or a combination of any of them. Can you guys help me out.

The problem that I am having is that if I change the search ng-model to just “troop”, the filter will use the phone and email items of the troop object.

Thanks

2

If you are just looking for your search string to appear in any property of troop then use the $ syntax.

Take a look at the example in the docs https://docs.angularjs.org/api/ng/filter/filter

Personally I find the use of “troop” as the search field confusing but setting the search model to troop.$ would make the filter:troop match on a partial match of any prop. (Personally I’d change it to search or searchData but hey :slight_smile: )

If you want something more complex the look to use the comparator option and write a function in your controller.

3

Actually just re read this. If you want to match against any property you just need a string and not an object. I think the trouble is coming from the use of troop as a search model and the input to the filter.
Check out the docs and look at the “any” searches in the example.
Cheers.