Ionic Angularjs is not filtering the data

Question

Here is my controller:

$scope.professionList = [];
$scope.searchText = '';
$scope.$on('$ionicView.enter', function() {
    PeopleSearchService.setSearchParams(undefined);
})
$scope.$on('$ionicView.loaded', function() {
    $scope.professionList = Constants.professionList();
})

I have this simple html

<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="searchText">
  </label>
    <button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
  <a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter:searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>

Inside controller i have $scope.searchText = '';

Typing anything in text box not filtering the list.

And no exceptions in console? – VadimB Feb 02 '17 at 13:04 — VadimB, Feb 02 '17 at 13:04

score 1 · Accepted Answer · edited May 23 '17 at 12:24

Here searchText input present inside ng-if="showSearchBox", which is why it put searchText scope variable inside childScope of ng-if element(ng-if/ng-repeat does create prototypically inherited child scope).

To avoid such kind of issues, always do follow Dot Rule while defining model's or controllerAs pattern to avoid scoping related issue.

Dot Rule

<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="model.searchText">
  </label>
    <button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
  <a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter: model.searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>

Similar answer

score 0 · Answer 2 · answered Feb 02 '17 at 14:55

How about something like that

    angular.module('ionicApp', ['ionic', 'sampleController'])

     angular.module('sampleController', [])

    .controller('sampleController', function($scope, $ionicScrollDelegate) {
      $scope.sampleData = [{
        'id': '1',
        'profession': 'Teacher'
      }, {
        'id': '2',
        'profession': 'Software Developer'
      }, {
        'id': '3',
        'profession': 'Graphic Designer'
      }];

    });

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="https://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/0.9.22/js/ionic.js"></script>
  <script src="https://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
  <script src="https://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
  <script src="https://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
  <script src="https://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
  <script src="https://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="sampleController">

  <header-bar title="'Filtering'" type="bar-positive"></header-bar>

  <content has-header="true" padding="true" scroll="false">

    <div style="height:250px">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search" ng-model="searchText">
      </label>
      <scroll direction="y">
        <ul class="list">
          <li ng-repeat="data in sampleData | filter:searchText">{{data.profession}}</li>
        </ul>
      </scroll>
    </div>
  </content>

</body>

</html>

Ionic Angularjs is not filtering the data

2 Answers2