Filtering on some JSON value with AngularJS filter

Question

I need to add a free text filter with only one text input to a table. Unfortunately standard filter operates on all values. For examples with this JSON array:

myJsonArray = [{col1: "xxx", col2: "yyy", col3: "zzz"},{...}]

I want to filter only on col1 and col2. Here's my code:

<input type="text" placeholder="Search for the first 2 columns..." ng-model="searchCols">
[...]
<tr ng-repeat="a in myJsonArray | filter : searchCols">
[...]

How can I say to filter: filter only col1 and col2 with text in searchCols? I've already tried something like this but didn't work:

<tr ng-repeat="a in myJsonArray | filter : {'col1' :searchCols, 'col2': searchCols">

score 1 · Accepted Answer · edited May 23 '17 at 12:25

You're on the right tracks, check this snippet:

angular.module("app", [])

  .controller('TestController', function() {
    this.list = [{
      name: 'John',
      email: 'john@a.com',
    }, {
      name: 'Mark',
      email: 'mark@a.com',
    }, ];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="TestController as ctrl">
  Search: <input type="text" ng-model="ctrl.searchTerm" />
<hr/>
  <div ng-repeat="item in ctrl.list | filter: {name: ctrl.searchTerm}">
    <b>{{item.name}}</b> ({{item.email}})
  </div>
</div>

If this does not work on your environment, you may have issues regarding the dot on the ngModel

You can combine multiple conditions by adding properties to the filter object, for example:

| filter: {name: ctrl.searchTerm, email: ctrl.searchTerm}

Will require the name and email to be equal to the search term.

If you need to do an OR condition instead, apparently you've to write a custom function:

angular.module("app", [])

  .controller('TestController', function() {
    this.searchTerm = "";
    this.list = [{
      name: 'John',
      email: 'john@a.com',
      team: 'Team A'
    }, {
      name: 'Mark',
      email: 'mark@a.com',
      team: 'Team B'
    }];
    var that = this;
    this.filterResults = function(item) {
      var searchTerm = that.searchTerm.toLowerCase();
      return !that.searchTerm ||
        ((item.name.toLowerCase().indexOf(that.searchTerm) != -1) ||
          (item.team.toLowerCase().indexOf(that.searchTerm) != -1));
    };

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="TestController as ctrl">
  Search: <input type="text" ng-model="ctrl.searchTerm" />
  <hr/>
  <div ng-repeat="item in ctrl.list | filter:ctrl.filterResults">
    <b>{{item.name}}</b> ({{item.email}})
  </div>
</div>

Ok, this work with one column. But if in your JSON there are 3 columns, how is syntax for concatenate more than one columns in the ng-repeat filter? For examples you have name, email and address but you want to filter only name and email... — Giorgio Portelli, Apr 21 '17 at 15:24
`| filter: {name: ctrl.searchTerm, email: ctrl.searchTerm}` should work — Leonardo Chaia, Apr 21 '17 at 15:30
With this syntax no errors but filter work only with the first parameter: name. Email field is ignored — Giorgio Portelli, Apr 21 '17 at 15:38

Filtering on some JSON value with AngularJS filter

1 Answers1