CODEWITHSUNDEEP
angularjs
Kaffarov
Kaffarov

Reputation: 81

How to use two filters in Angular JS?

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

Upvotes: 5

Views: 12722

Answers (1)

TheKingPinMirza
TheKingPinMirza

Reputation: 8922

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>

Upvotes: 7

Related Questions