Inline filter not working within an ion-content?


#1

Hi everyone,
I’m facing a weird issue when I try to apply an inline filter, on a list of items, inside a ion-content.

Here is a very simple code that show the problem :

<body ng-app='anApp'>
<div ng-controller='aCtrlr'>
  
  <ion-content>
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="roomTitle" ng-model-options="{debounce:200}">
  </label>
  <ul>
    <li ng-repeat="room in rooms | filter:filterFunc">
    {{room.name}}
    </li>
  </ul>
</ion-content>
</div>

And in my controller :

angular.module('anApp', ['ionic'])

.controller('aCtrlr', function($scope) {

 $scope.rooms = [{name:'aaa', title:'ertert'},{name:'zzz', title:'yhth'},{name:'eeee', title:'rtyrty'},{name:'rrrr', title:'zerez'},{name:'ttttt', title:'dsf'}];
$scope.roomTitle = '';

$scope.filterFunc = function(item){
      if($scope.roomTitle === '') return true;
        return (item.name.indexOf($scope.roomTitle) !== 0);
      };
})

Full code here : http://plnkr.co/edit/LoGmYHEoztxOgLTj4NlY

As long as my list is wrapped inside an ion-content the filter wont work. Actually the method is called but my $scope.roomTitle is never updated.
If I remove the everything is ok.

Is there something wrong the ion-content ? or am I missing something ?

Thank you,
G.


#2

oops I just missed this post Problem with ion-content and scope vars inside function which explains the reason.