Multiple Filters in Angular js

Question

I have an application which shows data in tabular form which has columns

id, name, price, quantity

A am showing the data using ng-repeat Please see this

<body ng-controller="myController">
<h1>Data</h1>

<table>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>PRICE</th>
    <th>QUANTITY</th>
  </tr>
  <tr ng-repeat="item in myData">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.quantity }}</td>
  </tr>
</table>

What I want to do is to add multiple filters in ng-repeat on this table

a) Filter by 'Name'

b) Filter by 'Price' OR 'Quantity'

It means that at any given point of time the result of the table should be filtered by combination of

i) EITHER 'Name' and 'Price'

ii) OR 'Name' and 'Quantity'

The Quantity filter should be inactive when Price filter is active and vice versa.

I will have 3 input fields for the filter parameters.

How can I apply filters to the ng-repeat in html to achieve this?

do you mean to filter or sort? also from where do you get input for filter value which is required for filtering? for example, how would you know what quantity to filter on ? — gaurav5430
– gaurav5430, Commented Jun 16, 2016 at 13:43
"How can I apply filters to the ng-repeat to achieve this?" - The same way as you would do with normal filtering in Angular. This has already been asked many times. As for disabling this is also trivial with some boolean flags and ngChange that would set them. — dfsq
– dfsq, Commented Jun 16, 2016 at 13:43
@gaurav5430 I want to filter the resultset, I will have 3 text boxes for Name, Price and Quantity. name is a straight-forward filter, Now When user inputs content in Price input, the other one(quantity) should get empty and vice versa — MasterMohsin
– MasterMohsin, Commented Jun 16, 2016 at 14:17
@dfsq I have no issue in implementing the filter in ng-repeat, here, my main concern is to toggle between Price and Quantity filter, Only one of them should be applied at one instance. — MasterMohsin
– MasterMohsin, Commented Jun 16, 2016 at 14:19

Tom Shen · Accepted Answer · 2016-06-16 13:55:53Z

2

I suggest you create a custom filter and pass a custom filterObject, containing all filteroptions to this filter.

<tr ng-repeat="item in myData | myCustomFilter:filterObject">
  <td>{{ item.id }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.price }}</td>
  <td>{{ item.quantity }}</td>
</tr>

your filterobject would look like :

$scope.filterObject = {
    id: false,
    name: true,
    price: false,
    quantity: true
}

In myCustomFilter :

app.filter('myCustomFilter', function(items, filterObject) {
    // filter your items depending on which filters are enabled
});

answered Jun 16, 2016 at 13:55

Tom Shen

1,0453 gold badges11 silver badges29 bronze badges

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

Comments

Vinicius Rodrigues do Santos · Accepted Answer · 2016-06-16 13:58:19Z

0

this is test myDatafilter add in js

myDatafilter = function () {};

<h1>Data</h1>
<input type="text" ng-model="myDatafilter"/>
<tr ng-repeat="item in myData | filter:myDatafilter">

answered Jun 16, 2016 at 13:58

Vinicius Rodrigues do Santos

11 bronze badge

1 Comment

ishmaelMakitla Over a year ago

You should really add some explanation as to why this code should work - you can also add comments in the code itself - in its current form, it does not provide any explanation which can help the rest of the community to understand what you did to solve/answer the question.

Collectives™ on Stack Overflow

Multiple Filters in Angular js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related