How to create user defined filters with ng-repeat

Question

Expanding on this. Would it be possible to add dynamic filtering to an ng-repeat?

For example I'm thinking of having a dynamic form which the user can add/remove form elements like this. Of course this would mean that the filter part of the ng-repeat would need to add/remove filter elements dynamically.

<select>
    <option>Age</option>
    <option>CustomerID</option>
    <option>ProductID</option>
<select>
<input type="text" name="select-option-value">

<input type="submit" value="add filter">
<input type="submit" value="remove filter">

in my ng-repeat:

<div ng-repeat="person in persons | filter: search">{{person.name}}</div>

If the user clicks "add filter" then I'm going to have an ng-repeat something like this:

<div ng-repeat="person in persons | filter: search | filter: search2">{{person.name}}</div>

I'm not sure if its even possible to append filter elements to ng-repeat when the user adds/removes filter form elements.

Any ideas?

Richard Peterson · Accepted Answer · 2015-09-28 17:07:35Z

You can use any arbitrary function on the controller as a filter. Thus you can create one filter that does whatever logic you need on an array of inputs.

So if you have the following view:

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="search in searches">
    <input type="text" ng-model="search.text">
  </div>
  <button type="button" ng-click="addSearch()">Add Search</button> 

  <div ng-repeat="person in people | filter:matchSearches">Name: {{person.name}}</div>
</div>

You could have the following controller:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.searches = [];

  $scope.addSearch = function(){
    $scope.searches.push(
      {"text": ""}
    );
  };

  // Any function on the controller can be a filter. Use this to combine the
  // searches however you like. Not sure the logic you want here, but
  // hopefully you can adjust to suit.
  $scope.matchSearches = function(item){
    return $scope.searches.filter(function(search){
      console.log(search); 
      return search.text.trim().length > 0 && (item.name.toLowerCase().indexOf(search.text.toLowerCase())>=0);
    }).length > 0;
  }

  $scope.people = [
    {"name": "Jim Smith"},
    {"name": "Bob Smith"},
    {"name": "John Smith"},
    {"name": "Frank Smith"},
    {"name": "Jim Jones"},
    {"name": "John Jones"},
  ];
});

http://codepen.io/anon/pen/QjGJQJ

pierdevara · Accepted Answer · 2015-09-28 16:57:44Z

You can add filters to an array of filter functions on Add. Then simply add a general custom filter on the ng-repeat that will call all of the function in the stack. The following is just a guideline, not actual code:

var filterStack = [],
filter1         = function () {},
filter2         = function () {};

On add filter:

filterStack[filterType1] = filter1;

or remove filter:

delete filterStack[filterType1];

And on the ng-repeat

<div ng-repeat="person in persons | filter: customFilter">

function customFilter (val) {
    foreach filterStack as filter
        val = filter(val)
}

Collectives™ on Stack Overflow

How to create user defined filters with ng-repeat

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related