Angularjs dynamic filtering

Question

Let's say I have model:

$scope.items = [{'name: 'test',value:'some value',category:'test'},{name:'value',value:'test',category:'test'}];

Which is iterated:

<div ng-repeat="item in items|filter:search">
{{item.name}} – {{item.value}}
</div>

And have an input box with filter model:

<input type="text" ng-model="search.$" />

When I type 'test' it shows both records. However, I need to dynamically select the properties of the initial object which will be used for the search.

So, I have three checkboxes (in real project I have more options to combine):

<input type="checkbox" ng-model="search.name" />
<input type="checkbox" ng-model="search.value" />
<input type="checkbox" ng-model="search.category" />

And in my controller:

$scope.search = {name: true, value: true,category: true};

This does not show any items at all. But I need to filter items by different fields changing the search properties on the fly (and combining them in different variants)

How is that possible?

Mathieu Bertin · Accepted Answer · 2014-10-16 12:17:13Z

3

search has to be a function() that will look at the checkbox value thanks to the $scope.

declare in your controller something like this

$scope.customFilter = function (item) {
    if (!$scope.search.$ || (!$scope.search.value && !$scope.search.name)) {// your input field is empty or no checkbox checked
        return true;
    }

    var searchVal = $scope.search.$;
    searchVal = searchVal.replace(/([()[{*+.$^\\|?])/g, '\\$1'); //special char

    var regex = new RegExp('' + searchVal, 'i');

    var matchOnValue = false, matchOnName= false; 

    if ($scope.search.value) {
       matchOnValue = regex.test(item.value);
    }
    if ($scope.search.name) {
       matchOnName = regex.test(item.name);
    }
    return matchOnValue || matchOnName;
}

So in your template use it

<div ng-repeat="item in items|filter:customFilter">
   {{item.name}} – {{item.value}}
</div>

Plnkr Here

edited Oct 16, 2014 at 12:17

answered Oct 16, 2014 at 9:28

Mathieu Bertin

1,62411 silver badges11 bronze badges

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

4 Comments

Sray Over a year ago

Thank you. But I don't quite understand how it is gonna work. When I type in search field nothing happens as there is no event attached to it. Moreover, following your code I have to specify all searching fields manually. But what if I had 20+ fields?

Mathieu Bertin Over a year ago

If you had several fields you can also put the keys in an array and iterate on the keys.

Sray Over a year ago

ok, ty! But how this will work? I tried your code but it's not working when I type smth in the text field

Mathieu Bertin Over a year ago

Can you do a fiddle (or something like this) I will try to correct it

sylwester · Accepted Answer · 2014-10-16 10:37:32Z

0

Please see sample below

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

app.controller('fCtrl', function($scope) {

  $scope.items = [{
    'name': 'apple',
    value: 'yellow'
  }, {
    name: 'prune',
    value: 'red'
  }, {
    'name': 'red ',
    value: 'apple'
  }];


  $scope.name = false;
  $scope.value = false;

  $scope.filter = "$";
  $scope.search = {
    name: '',
    value: '',
    $: ''
  };
  $scope.changeFilterTo = function(pr) {

   
    $scope.filter = pr;
    $scope.search = {
      name: '',
      value: '',
      $: ''
    };
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <input type="text" ng-model="search[filter]">by {{filter}}
    <input type="radio" name="search" ng-click="changeFilterTo('name')" />Name
    <input type="radio" name="search" ng-click="changeFilterTo('value')" />Value
    <input type="radio" name="search" ng-click="changeFilterTo('$')" />$
    <div ng-repeat="item in items|filter:search">
      {{item.name}} – {{item.value}}
    </div>
  </div>
</div>

edited Oct 16, 2014 at 10:37

answered Oct 16, 2014 at 10:31

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

1 Comment

Sray Over a year ago

Thank you. In your example I can only filter by name, value or all fields together($). But how I can filter by name+value? I'm asking, because in real project there are about 20fields so your example is not applicable in this case.

Collectives™ on Stack Overflow

Angularjs dynamic filtering

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related