Using a search feature in angular js

Question

I am trying to use the search feature in AngularJS (in Ionic framework). I have a template consisting of different views and a common header for all views. On each view, a different list appears using JSON. I want to use the search feature for each view.

 <form class="form-inline">
      <div class="form-group">
          <input type="text" ng-model="search" class="form-control" placeholder="Search">
      </div>
 </form>

<ion-item class="item-button-right item-avatar item-icon-right item item-thumbnail-left" ng-repeat="text in texts|filter:search" type="item-text-wrap" href="#/otherContent/texts/{{text.id}}">

This code works fine if I use the above search form and ion-item in one single view. But does not work if I add search form in searchbar and put <ion-item> tag in the different page.

I hope this makes sense? Can anyone please suggest how can we implement this. I need searchbar in the header which is common for all views and it should search for each view when it is loaded. Any pointers are truly appreciated.

Shashank Agrawal · Accepted Answer · 2015-11-26 13:23:40Z

1

If you have a top level controller which is added to like html or body tag (if not then define a top level controller like GlobalController and add it to your <html> or <body> tag so that we can keep the global data there and it's scope can be globally accessible app-wide. Basically we are trying to avoid the $rootScope usage and mimicking the $rootScope usage.), then define an empty object in that global controller:

 $scope.globalModel = {};

Then, change your ng-model like:

<input type="text" ng-model="globalModel.search" class="form-control" placeholder="Search">

And finally modify your search filter like:

<ion-item class="item-button-right item-avatar item-icon-right item item-thumbnail-left" ng-repeat="text in texts|filter:globalModel.search" type="item-text-wrap" href="#/otherContent/texts/{{text.id}}">

The above should work. What we are doing here is that defining an object in a parent scope so that we can prevent the problem of Angular Scopes Inheritance.

edited Nov 26, 2015 at 13:23

answered Nov 26, 2015 at 13:07

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

1 Comment

Shruti Over a year ago

Thanks alot! Working great! :)

Collectives™ on Stack Overflow

Using a search feature in angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related