Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Filter by multiple columns with ng-repeat

Tags:

angularjs

I'm wondering if there's an easy way in Angular to filter a table using ng-repeat on specific columns using or logic, rather than and. Right now, my filter is searching everything in the table (10+ columns of data), when it really only needs to filter on 2 columns of data (ID and Name).

I've managed to get it down to look only at those 2 columns when filtering (by using an object in the filter expression as per the docs and looking at this SO answer), but it's using and logic, which is too specific. I'd like to get it to use or logic, but am having trouble.

My HTML

<input type="text" ng-model="filterText" />
<table>
      <tr ng-repeat="item in data"><td>{{ item.id }}</td><td>{{ item.name }}</td>...</tr>
</table>

My filter logic:

$filter('filter')(data, {id:$scope.filterText, name:$scope.filterText})

The filtering works, but again, it's taking the intersection of the matching columns rather than the union. Thanks!

like image 899
jetcom Avatar asked Dec 31 '13 00:12

jetcom


People also ask

How do you put filters on NG-repeat?

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.

What can I use instead of NG-repeat?

And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What is correct way to apply multiple filters in angular?

Answer: A is the correct option. The syntax of applying multiple filters in AngularJS can be written as: {{ expression | filter1 | filter2 | ... }}

Can we use filter in NG-model?

By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter.


1 Answers

It's not hard to create a custom filter which allows you to have as many arguments as you want. Below is an example of a filter with one and two arguments, but you can add as many as you need.

Example JS:

var app = angular.module('myApp',[]);
app.filter('myTableFilter', function(){
  // Just add arguments to your HTML separated by :
  // And add them as parameters here, for example:
  // return function(dataArray, searchTerm, argumentTwo, argumentThree) {
  return function(dataArray, searchTerm) {
      // If no array is given, exit.
      if (!dataArray) {
          return;
      }
      // If no search term exists, return the array unfiltered.
      else if (!searchTerm) {
          return dataArray;
      }
      // Otherwise, continue.
      else {
           // Convert filter text to lower case.
           var term = searchTerm.toLowerCase();
           // Return the array and filter it by looking for any occurrences of the search term in each items id or name. 
           return dataArray.filter(function(item){
              var termInId = item.id.toLowerCase().indexOf(term) > -1;
              var termInName = item.name.toLowerCase().indexOf(term) > -1;
              return termInId || termInName;
           });
      } 
  }    
});

Then in your HTML:

<tr ng-repeat="item in data | myTableFilter:filterText">

Or if you want to use multiple arguments:

<tr ng-repeat="item in data | myTableFilter:filterText:argumentTwo:argumentThree">
like image 145
charlietfl Avatar answered Sep 23 '22 03:09

charlietfl