Angularjs Ng-repeat с поисковым фильтром работает только на 2-й символьной клавиатуре

584 просмотра

2 ответа

Я реализовал базовый поисковый фильтр Angularjs, но он работает только тогда, когда я ввожу второй символ в поле ввода.

<input type="text" ng-model="search" class="search-input" id="search-input"><div ng-repeat="x in publishList | filter:search"></div>
Автор: Neeraj Sharma Источник Размещён: 08.11.2019 10:59

Ответы (2)


1 плюс

Я реализовал то же самое и работает, не уверен, почему это не работает для вас. Как вы можете попробовать это?

<input type="text" ng-model="search.scheduleName" class="search-input" id="search-input">
Автор: Ruhul Размещён: 20.08.2016 07:13

1 плюс

Я попытался с кодом и массивом, который вы дали, и он работает для меня.

Не могли бы вы создать пример jsfiddle или plnkr, иллюстрирующий проблему?

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    { scheduleName : 'Forrest' },
    { scheduleName : 'Gump' },
    { scheduleName : 'saw' },
    { scheduleName : 'xmen' },
    { scheduleName : 'troy' }
    ];
  }
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <input type="text" ng-model="ctrl.search"/>
    <div ng-repeat="item in ctrl.items | filter : ctrl.search">
      {{item.scheduleName}}
    </div>
  </div>  
</div>

Вы также можете фильтровать по свойству объекта в массиве, используя любой из двух подходов, приведенных ниже.

Указание свойства для фильтрации во встроенном фильтре AngularJS, называемом фильтром .

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    { id: 1, scheduleName : 'Forrest' },
    { id: 2, scheduleName : 'Gump' },
    { id: 3, scheduleName : 'saw' },
    { id: 4, scheduleName : 'xmen' },
    { id: 5, scheduleName : 'troy' }
    ];
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <input type="text" ng-model="ctrl.search"/>
    <div ng-repeat="item in ctrl.items | filter : { scheduleName: ctrl.search }">
      {{item.id}}. {{item.scheduleName}}
    </div>
  </div>  
</div>

Указание объекта, который будет использоваться для фильтрации - это более динамично.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    { id: 1, scheduleName : 'Forrest' },
    { id: 2, scheduleName : 'Gump' },
    { id: 3, scheduleName : 'saw' },
    { id: 4, scheduleName : 'xmen' },
    { id: 5, scheduleName : 'troy' }
    ];
  }
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <input type="text" ng-model="ctrl.search.scheduleName"/>
    <div ng-repeat="item in ctrl.items | filter : ctrl.search">
      {{item.id}}. {{item.scheduleName}}
    </div>
  </div>  
</div>

Автор: Abdul Mateen Mohammed Размещён: 20.08.2016 07:56
Вопросы из категории :
32x32