Filter by multiple columns with ng-repeat

Question

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!

score 25 · Answer 1 · edited Jul 16 '15 at 14:38

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

Ah- thanks for the response! I just posted my own response as well- looks like we posted at the same time! — jetcom, Dec 31 '13 at 02:45
Good answer, I added an answer which expands on yours to filter by one column passed as a variable. — Moses Machua, Apr 06 '15 at 02:07

score 20 · Answer 2 · answered Mar 10 '14 at 16:39

20

Use this to search on All Columns (can be slow): search.$ AngularJS API: filter

Any Column Search:
<input ng-model="search.$"> 
<table>
<tr ng-repeat="friendObj in friends | filter:search:strict">
...

answered Mar 10 '14 at 16:39

ssoward

540
5
9

Very nice and simple. I haven't noticed any performance problems yet with 500+ entries of filterable data. – Brooklyn Nicholson Jun 19 '14 at 20:48
6

It works well, but do you know if it's possible to select easiest just 2 or 3 fields ? – jlafforgue Jun 11 '15 at 19:48

Moses Machua · Answer 3 · 2015-06-24T02:37:59.483

To expand on the excellent answer by @charlietfl, here's a custom filter that filters by one column(property) which is passed to the function dynamically instead of being hard-coded. This would allow you to use the filter in different tables.

var app=angular.module('myApp',[]);        
app.filter('filterByProperty', function () {
        /* array is first argument, each addiitonal argument is prefixed by a ":" in filter markup*/
        return function (dataArray, searchTerm, propertyName) {
            if (!dataArray) return;
            /* when term is cleared, return full array*/
            if (!searchTerm) {
                return dataArray
            } else {
                /* otherwise filter the array */
                var term = searchTerm.toLowerCase();
                return dataArray.filter(function (item) {
                    return item[propertyName].toLowerCase().indexOf(term) > -1;
                });
            }
        }
    });

Now on the mark-up side

<input type="text" ng-model="filterText" />

<table>
  <tr ng-repeat="item in data |filterByProperty:filterText:'name'"><td>{{ item.id }}</td><td>{{ item.name }}</td>...</tr>
</table>

score 3 · Accepted Answer · answered Dec 31 '13 at 02:44

I figured it out- I had to write my own custom filter. Here is my solution:

var filteredData;

filteredData = $filter('filter')(data, function(data) {
  if ($scope.filter) {
    return data.id.toString().indexOf($scope.filter) > -1 || data.name.toString().indexOf($scope.filter) > -1;
  } else {
    return true;
  }
});

score 1 · Answer 5 · answered Feb 08 '17 at 14:05

I created this filter to perform search in several fields:

var find = function () {
    return function (items,array) {
        var model  = array.model;
        var fields = array.fields;
        var clearOnEmpty = array.clearOnEmpty || false;
        var filtered = [];

        var inFields = function(row,query) {
            var finded = false;
            for ( var i in fields ) {
                var field = row[fields[i]];
                if ( field != undefined ) {
                    finded = angular.lowercase(row[fields[i]]).indexOf(query || '') !== -1;
                }
                if ( finded ) break;
            }
            return finded;
        };

        if ( clearOnEmpty && model == "" ) return filtered;

        for (var i in items) {
            var row = items[i];                
            var query = angular.lowercase(model);

            if (query.indexOf(" ") > 0) {
                var query_array = query.split(" ");
                var x;
                for (x in query_array) {
                    query = query_array[x];
                    var search_result = true;
                    if ( !inFields(row,query) ) {
                        search_result = false;
                        break;
                    }
                }
            } else {
                search_result = inFields(row,query);
            }                
            if ( search_result ) {
                filtered.push(row);
            }
        }
        return filtered;
    };
};

How to use:

<tr repeat="item in colletion
                    | find: {
                        model : model, // Input model
                        fields : [     // Array of fields to filter
                            'FIELD1',
                            'FIELD2',
                            'FIELD3'
                        ],
                        clearOnEmpty: true // Clear rows on empty model (not obligatory)
                    } "></tr>

score 0 · Answer 6 · answered Jan 06 '16 at 12:19

Easily We can do this type Following written code according you will easily create another field filter....

var myApp = angular.module('myApp',[]);

myApp.filter('myfilter',myfilter);

function myfilter(){
   return function (items, filters) {
        
        if (filters == null) {
            return items;
        }

        var filtered = [];
        //Apply filter
        angular.forEach(items, function (item) { 
            if ((filters.Name == '' || angular.lowercase(item.Name).indexOf(angular.lowercase(filters.Name)) >= 0) 
               )
            {
                filtered.push(item);
            }

        });
        return filtered;
    };
}

myApp.controller('mycontroller',['$scope',function($scope){
  $scope.filters={Name:'',MathsMarks:''};
  $scope.students=[];
  var i=0;
  for(i=0;i<5;i++){
    var item={Name:'',Marks:[]};
  
    item.Name='student' + i;  
    item.Marks.push({Maths:50-i,Science:50 +i});
    
    $scope.students.push(item);
  }

}]);

<html ng-app='myApp'>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</head>
  <body ng-controller='mycontroller'>
    <input type='text' name='studentName' ng-model="filters.Name" placeholder='Enter Student Name'>
    <div ng-repeat="student in students | myfilter: filters">
      Name : {{student.Name}} Marks == >
      <span ng-repeat="m in student.Marks">Maths:{{m.Maths}} Science:{{m.Science}}</span>
      </div>
  </body>
</html>

score 0 · Answer 7 · answered Dec 07 '16 at 00:31

Here is my solution, it's very lazy, it will search on all strings in array on first level, you could update this to recusively go down the tree, but this should be good enough...

app.filter('filterAll', function () {

    return function (dataArray, searchTerm, propertyNames) {
        if (!dataArray) return;    

        if (!searchTerm) {
            return dataArray;
        } else {



            if (propertyNames == undefined) {
                propertyNames = [];

                for (var property in dataArray[0]) {
                    if(typeof dataArray[0][property] == "string" && 
                        property != "$$hashKey" && 
                        property != "UnitName" )
                        propertyNames.push(property);
                }
            }

            console.log("propertyNames", propertyNames);

            var term = searchTerm.toLowerCase();
            return dataArray.filter(function (item) {
                var found = false;
                propertyNames.forEach(function(val) {
                    if (!found) {
                        if (item[val] != null && item[val].toLowerCase().indexOf(term) > -1)
                            found = true;
                    } 
                });
                return found;
            });
        }
    }
});

score 0 · Answer 8 · answered Oct 16 '17 at 12:41

0

see this link Filter multiple object properties together in AngularJS

answered Oct 16 '17 at 12:41

User4567

1,005
1
12
27

Filter by multiple columns with ng-repeat

8 Answers8

Linked