Search code examples
angularjsionic-frameworkfiltersearch-form

Multi-criteria form with angularjs


I have a form that works well, and I would like to add filters to it.

For the moment I can search for a person by his first name, but I would like to be able to search also with his name, and his e-mail address.

{
    fname : "paul",
    name : "raoul",
    mail : "[email protected]"
}

Here is my search form:

<form ng-controller="searchCtrl" id="search-form5" class="list" name="myForm" ng-submit="search()" ng-disabled="myForm.$invalid">
  <label class="item item-input" id="search-search1" style="">
    <i class="icon ion-search placeholder-icon"></i>
    <input placeholder="Search" type="text" ng-model="form.fname" required>
  </label> 

  <ion-list id="menu-list1">
    <ion-item ng-repeat="item in list track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
  </ion-list>
</form>

Thank you for your answers :)


Solution

  • To search by any matching string of any form property, search model can be like:

    <input placeholder="Search" type="text" ng-model="filterBy.$" required>
    

    Then apply this filter in the ng-repeat by:

    <ion-item ng-repeat="item in list | filter : filterBy track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>