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
– VadimB

2017-02-02 13:04:25 +00:00
Commented Feb 2, 2017 at 13:04 — VadimB
– VadimB, Commented Feb 2, 2017 at 13:04

Community · Accepted Answer · 2017-05-23 12:24:19Z

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

MMK · Accepted Answer · 2017-02-02 14:55:36Z

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>

Collectives™ on Stack Overflow

Ionic Angularjs is not filtering the data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related