How to use two filters in Angular JS?

Question

I have input field:

<input type="text" ng-model="in">

Also select list:

<select ng-model="sel"></select>

How I can use two filters in ng-repeat something like:

ng-repeat="item in arr | filter:sel | filter:in"

My select list in header:

<div ng-controller="TestController">
   <select ng-controller="in"></select>
</div>

Also in bottom of page I have:

<div ng-controller="TestController">{{in}}</div>

But {{in}} is empty

You're using correct. Can you share your code where you're getting error. — Vineet
– Vineet, Commented Jul 11, 2015 at 19:43
Do you have value property of <option> tag set for each select <option>? — Alexander Staroselsky
– Alexander Staroselsky, Commented Jul 11, 2015 at 19:46
This doesn't make any sense; <select ng-controller="in"> isn't even valid. also, why are you repeating ng-controller in another div? That div won't have access to the $scope of the other controller.... — Claies
– Claies, Commented Jul 11, 2015 at 20:52
it would be much easier to see what is going on if you post all the relevant code from the page, and even better, if you create a plunker demonstrating your issue. plnkr.co — Claies
– Claies, Commented Jul 11, 2015 at 20:55

TheKingPinMirza · Accepted Answer · 2015-07-11 19:56:16Z

7

You're doing right. The following can be taken as an example to apply filter. You can modify it to apply multiple filters as well.

Search field

<input type="text" ng-model="in" placeholder="Enter value to search.">
<select ng-model="sel">
<option value="1">One</option>
<option value="2">Two</option>
</select>

Using filter in ng-repeat:

<div>    
<tr ng-repeat="item in filteredData = (arr | filter:in | filter: sel)">
</div>

or simple way for multiple filters like as per your question

<tr ng-repeat="item in arr| filter:in | filter: sel">

Then showing message whether data found or not.

<div ng-show="!(filteredData ).length">
    No matching data found
</div>

edited Jul 11, 2015 at 19:56

answered Jul 11, 2015 at 19:50

TheKingPinMirza

9,0826 gold badges53 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaffarov Over a year ago

It does not work for me. because I have two same controllers in HTML page. Updated question

TheKingPinMirza Over a year ago

what you mean by " I have two same controllers in HTML page"? it looks weired statement. Can you post your whole code?

Collectives™ on Stack Overflow

How to use two filters in Angular JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related