Ионные Angularjs не фильтрует данные

Вот мой контроллер:Ионные 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 = '';

Ввод текста в текстовое поле не фильтрует список.

источник

2017-02-02 manish

И никаких исключений в консоли? – VadimB

Здесь searchText вход присутствует внутри ng-if="showSearchBox", поэтому он положил searchText области видимости переменных внутри childScope из ng-if элемента (ng-if/ng-repeat действительно создает прототипически унаследованную ребенка объем).

Чтобы избежать таких проблем, всегда следует Dot Rule при определении модели или controllerAs pattern во избежание проблем, связанных с определением области охвата.

Dot Правило

<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

источник

2017-02-02 13:13:03

Как о чем-то вроде этого

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>

источник

2017-02-02 14:55:36 MMK

Ионные Angularjs не фильтрует данные

ответ

Смежные вопросы