MasterMohsin MasterMohsin - 1 year ago 93
AngularJS Question

Multiple Filters in Angular js

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">

<tr ng-repeat="item in myData">
<td>{{ }}</td>
<td>{{ }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>

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?

Answer Source

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>{{ }}</td>
  <td>{{ }}</td>
  <td>{{ item.price }}</td>
  <td>{{ item.quantity }}</td>

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