Ionic Angularjs 不会过滤数据

这是我的控制器：

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

我有这个简单的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>

内部控制器我有 $scope.搜索文本 = '';

在文本框中键入任何内容而不筛选列表。

这里searchText输入存在于ng-if="showSearchBox"中，这就是为什么它将searchText范围变量放在ng-if元素的childScope中的原因（ng-if/ng-repeat确实创建了原型继承的子范围）。

为避免此类问题，在定义模型或controllerAs pattern时始终遵循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>

类似的答案

这样的事情怎么样

    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>

相关内容

最新更新

热门标签：