CODEWITHSUNDEEP
angularjshtml
Neeraj Sharma
Neeraj Sharma

Reputation: 346

Angularjs Ng-repeat with search filter only works on 2nd character keyup

I have implemented basic Angularjs search filter but it only work when I enter 2nd character in input box.

<input type="text" ng-model="search" class="search-input" id="search-input"><div ng-repeat="x in publishList | filter:search"></div>

Upvotes: 0

Views: 814

Answers (2)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

I have tried with the code and the array you've given and it works for me.

Could you create a jsfiddle or plnkr example illustrating the problem ?

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>

You can also filter by an object's property in the array by using any one of the two approaches given below.

Specifying the property to filter in the AngularJS built-in filter called filter.

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>

Specifying an object to be used to filter - this is more dynamic.

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>

Upvotes: 1

Ruhul
Ruhul

Reputation: 1030

I have implemented the same and is working, not sure why it is not working for you. How ever can you try this?

<input type="text" ng-model="search.scheduleName" class="search-input" id="search-input">

Upvotes: 1

Related Questions