CODEWITHSUNDEEP
javascriptangularjs
Hitu Bansal
Hitu Bansal

Reputation: 3137

Angular filter is not working

I am trying to use Angular filter under ng-repeat

Here is my code:

<ul id="testDiv2" class="dropdownH">
  <input type="text" placeholder="Keyword Filter" data-ng-model="search.category.category_name">
  <li data-ng-repeat="category in categories track by $index | filter: search.category.category_name" 
      data-ng-click="selectCategory($index)">
    <div class="colony pull-left">
      <span>{{category.category_name}}</span>
    </div>
    <div class="pull-right">
      <input type="radio" name="tag" />
      <label></label>
    </div>
  </li>
</ul>

The above code is not working. But if I remove track by $index then it is working.

Any suggestions?

Upvotes: 0

Views: 148

Answers (2)

A.B
A.B

Reputation: 20445

You have problem with track by expression , use it after the filter

for example use

data-ng-repeat="category in categories  | filter:search track by $index"

Working Demo :

angular.module("test",[]).
controller("testController",function($scope){
$scope.categories = [{category_name:'abc'},{category_name:'cde'}];

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" >
<ul id="testDiv2" ng-controller="testController" class="dropdownH">
<input type="text" placeholder="Keyword Filter" data-ng-model="search">
<li data-ng-repeat="category in categories  | filter:search track by $index" data-ng-click="selectCategory($index)">
 <div class="colony pull-left"><span>{{category.category_name}}</span></div>
                                                        <div class="pull-right"><input type="radio" name="tag" /><label></label></div>

</li>
</ul>

Upvotes: 2

Hitu Bansal
Hitu Bansal

Reputation: 3137

I found the solution

i need to use

<li data-ng-repeat="category in categories  | filter: search.category.category_name track by $index" data-ng-click="selectCategory($index)"

Upvotes: 1

Related Questions