Search Filter in Header Bar

1

I have an app with a header and a side menu.

I’m trying to filter a list from an input in my app’s header bar, but the filter doesn’t work if the input is in the header. If I move the input to the ion-content in the view to which the data is bound then it works.

Any ideas about how to search across scopes?

<input type="search" ng-model="search.$">
<div ng-repeat="book in filtered = (books | filter:search)">{{book.title}}</div>
2

it depends how your app structure is.

if the ion-content part has its own controller you do not have access to the stuff in the headerbar.

3

Yeah, I can bind the data to $rootScope but then the search model/filter never leaves its child scope.

My “solution” was to initialize $rootScope.search = {}; and then it “worked,” but it feels like an ugly hack and I’m scratching my head thinking if there’s a more angular way to do it.

4

you could use angular events to inform parent scopes:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
look for $on, $emit, $broadcast

Or you store the value in a service -> controllers can load the service and get the stored value of “search”.

5

@jough check out This plugin should be what you’re looking for.

1 Like
6

You may try following link.