current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
up vote 3 down vote accepted

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

share|improve this answer
    
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? – Sray Oct 16 '14 at 10:31
    
If you had several fields you can also put the keys in an array and iterate on the keys. – Mathieu Bertin Oct 16 '14 at 11:41
    
ok, ty! But how this will work? I tried your code but it's not working when I type smth in the text field – Sray Oct 16 '14 at 11:43
    
Can you do a fiddle (or something like this) I will try to correct it – Mathieu Bertin Oct 16 '14 at 11:44
    
Thanks in advance. plnkr.co/edit/oSf0VNv2Wu87GNT0zKFt – Sray Oct 16 '14 at 11:58
up vote 0 down vote

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>

share|improve this answer
    
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. – Sray Oct 16 '14 at 10:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.