Question

这是我的控制器：

process.env.NODE_ENV

我有这个简单的HTML

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

我有内部控制器 $ scope.searchText ='';

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

Answer 1

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

要避免此类问题，请始终在定义模型或ng-repeat时遵循Dot Rule以避免与范围相关的问题。

点规则

controllerAs pattern

Similar answer

Answer 2

这样的事情

    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不会过滤数据

2 个答案: