List filtering not working with search input

ionic-v1
1

Hi all,

I am new to ionic and angular, and just trying to find my way around it. One of the things that got me into it is the data binding and filters that can be applied. unfortunately, this is not working for me with my list and wondering if anyone can help, as I am sure it is probably something I am doing wrong. Here is what I have:

<ion-side-menus>
  <ion-side-menu-content>
    <ul>
      <li ng-repeat="item in items | filter:searchInput"><h4>{{item.title}}</h4><p>{{item.content}}</p></li>
    </ul>
  </ion-side-menu-content>
  <ion-side-menu side="right">
    <input type="text" ng-model="searchInput"/>{{searchInput}}
  </ion-side-menu>
</ion-side-menus>

The binding to the text just after the input field works fine, however the list is not getting filtered based on that same input.

Any help regarding this will be greatly appreciated

2

So is mine.
It is not being filtered.

3

Can anyone please offer some guidance on this? I am currently stuck and unable to progress further with my app.

thanks

4

Yeah! So is mine… If i downgrade Ionic to version 12 it works allright!

5

Hi, in my case i just create model in my controller and call it in views, so i create model first in my controller (init) then i call my model in my view even when i try to filter it’s works perfectly,
perhaps it works

//myController

angular.module('app').controller('myController', function($scope) {
 //init model
 $scope.input = {};
 
 //your items,.... 
});

//views

<ion-side-menus ng-controller="myController">
  <ion-side-menu-content>
    <ul>
      <li ng-repeat="item in items | filter:input.searchInput"><h4>{{item.title}}</h4><p>{{item.content}}</p></li>
    </ul>
  </ion-side-menu-content>
  <ion-side-menu side="right">
    <input type="text" ng-model="input.searchInput"/>{{searchInput}}
  </ion-side-menu>
</ion-side-menus>
3 Likes
6

Awesome!,

Working fine now. Can’t thank you enough for this

Cheers

7

good job @pkgaisie
:wink:

8

I am using it inside a modal. It still does not work for me.

9

do you share your scope or does your modal have its own scope?

what i did:
controller of my view:

//Modal Init:
$ionicModal.fromTemplateUrl('views/modal/contact.html', {
    animation: 'fade-in',
    scope: $scope
}).then(function(modal) {
    $scope.modal.Contact = modal;
});
// Filter init:
$scope.query = {};
$scope.clearSearch = function() {
    $scope.query = {};
};

// Opens my Modal:
$scope.openContactModal = function() {
    $scope.modal.Contact.show();   
}

My modal search box: <input type="search" placeholder="search" ng-model="query.filter">

modal list: ng-repeat="item in contacts | filter:query.filter"

this works for me. if you still have problems can you create a codepen so we can look at it.

10

Hi @donny, I am not sure if this is related but your expertise will be very much appreciated. I created a new topic here Accessing filtered results, and will be grateful if you had any inputs towards that.

Cheers!