Problems getting a list search to work, outside of ion-content

ionic-v1
1

So I was wondering if someone would be willing to explain an issue I’m having. I didn’t think the question would require a codepen example but if it does let me know and I’ll whip one out.

My issue is this. Say I have a structure like;

<ion-view>
  <ion-navbuttons>
     <!-- *** If I put this here, it does NOT search the list ***-->
     <input type="text" placeholder="Search Claims" ng-model="searchText"/>
  </ion-navbuttons>
  <ion-content>

        <!-- *** If I put this here, it DOES search the list ***-->
            <input type="text" placeholder="Search Claims" ng-model="searchText"/>
      
       <ion-list>
           <ion-item ng-repeat="something in somewhere | filter:searchText">
                 ..stuff...
           </ion-item>
        </ion-list>

   </ion-content>

</ion-view>

So I want to move the search field into the navbar but still be able to throw buttons up there too, except when I do that it seems to lose the datacontext of the view or something and won’t search the list. If I leave the search input inside of <ion-content> then it searches as expected. Anyone want to help make this dude’s Friday that much better and point out the folly?

Sorry, still in the transition from my .NET world over to this stuff so I genuinely appreciate your time either way. Cheers!

1 Like
2

You can check out the filterBar directive I created here which appends a search bar over your navBar .

3

Let’s see… I think you haven’t set searchText as part of the model on the controller, and because ion-content has created its own scope (and inherits), this is not present in the parent.

Try setting in the controller

$scope.searchText = ‘’

If this does not solve your problem… I will have to read the Angular docs again :frowning: haha

4

Well this is cool, thanks! I’ll have to look into this. Unfortunately though we’re actually using ionic for an app that will primarily be used on tablets and have most of the functionality (including search) unavailable for phones and I have to be careful with how many contemporary effects (like floating stuff over static content that makes things disappear) I use because the user base is older, like generally >=60 guys lol…but definitely a cool approach!

1 Like
5

Yea that’s what I was thinking to, and I added the $scope but maybe I’m missing some syntax nuance or something. I hate to admit it, but I miss my xaml/xml front end world lol.

6

You need to change the ng-model to something like:

searchText.value

and then declare it in the controller:

$scope.searchText = { }

Codepen

I believe the reason is here: http://stackoverflow.com/a/22768720/3802466

1 Like
7

Well shoot, I try this and it’s obviously hitting the list because all the items filter out when I enter anything in the input, but it’s not actually searching/filtering the items. If it wasn’t Friday I would be rather frustrated at the moment lol!

8

Can you put a codepen? I tried to add an element as a sibling of ion-content but had no luck.

9

Awesome! I did it just a little different but it works like a charm. All I did was add the members to the controller;

$scope.search = {};
$scope.search.searchText = '';

Then on the input;

ng-model="search.searchText"

Then on the filter;

ng-repeat="something in somewhere | filter:search.searchText"

and voila! Thanks Brandy! Made my Monday so far lol.

1 Like