Input in ion-nav-title with ng-model not binding/working


#1

I had a nice idea, but it doesnt work.

Because I have in the ion-nav-bar a Button for the search, i would replace the header with a search input if the user would search.
So I developed it with a simple input and ng-model=“search”.
In the ion-content I use ng-repeat with a filter.

It looks like…

…and…

.

And that’s the script behind.

<ion-nav-title>
   <span ng-hide="search">Title</span>
   <span ng-if="search">
      <label class="item item-input">
         <input type="text" placeholder="Search..." ng-model="searchText">
      </label>
   </span>
</ion-nav-title>

With the ng-repeat

<ion-content>
   <div class="categories-list">
      <div ng-repeat="item in items | filter: searchText">{{ item }}</div>
   </div>
</ion-content>

But if i enter something the filter would’nt applied.

Whats wrong?

Thanks in Advance!


Newbie search input in header
#2

Check these posts out to see if they help:


#3

Hmm, thats very funny.

If I use this, it works.

ng-model="$parent.searchText"

In ion-content i must use the $parent, too.

It is a bug?


#4

I had the same issue. My in doesn’t work unless I add $parent to it. I’m glad @Paedy found the solution. Otherwise, it would take me very long time to figure out.


#5

Same problem $parent worked for me.

Thanks @Paedy