CODEWITHSUNDEEP
angularjsionic-framework
Manish Kumar
Manish Kumar

Reputation: 10492

Ionic Angularjs is not filtering the data

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.

Upvotes: 0

Views: 50

Answers (2)

MMK
MMK

Reputation: 3721

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>

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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

Upvotes: 1

Related Questions