1

I'm building an application using Angular.js. In this app I'm getting some data via AJAX in JSON format. I'm showing this data listed in a table, and I put a search text input to filter it.

I implemented the filter this way:

[...]
<input ng-model="searchText"/>
[...]
<tr ng-repeat="data in datarray | filter:searchText">
<td>{{data.title}}<td>
<td>{{data.message}}<td>
<tr>
[...]

What I want (and don't know how) to do is filtering this data only for certain fields (e.g. its title).

For example: if I have data[0] with title "cats" and message "cats and dogs", and data[1] titled "dogs" and with message "cats and dogs", and I search for "cats", I want only data[0] to be shown, without considering data messages but only the titles.

Mel
  • 5,837
  • 10
  • 37
  • 42
prtnkl
  • 302
  • 1
  • 4
  • 12
  • 1
    Possible duplicate of [Angularjs filter by multiple columns with ng-repeat](http://stackoverflow.com/questions/20849804/angularjs-filter-by-multiple-columns-with-ng-repeat) – isherwood Nov 30 '15 at 19:14
  • Side note - you should really consider using one of the existing table solutions (such as ag-grid or something) instead of building your own. – David says Reinstate Monica Nov 30 '15 at 19:35

2 Answers2

12

As provided in the doc : https://docs.angularjs.org/api/ng/filter/filter

you should set your ng-model correctly :

<input ng-model="search.title" />

you can also combine search columns :

<input ng-model="search.title" />
<input ng-model="search.message" />

and in your filter :

<tr ng-repeat="data in datarray | filter:search">
  <td>{{data.title}}<td>
  <td>{{data.message}}<td>
<tr>

Here is a demo : http://plnkr.co/edit/LCWV35PvbU7rLQvgqiOw?p=preview

Igloob
  • 197
  • 5
  • Thank you! How would you write it to have a single search text input to filter considering, for example, two out of three columns? Let's say i have for example columns "name", "surname" and "number" and i want a single text search to filter considering only "name" and "surname", how would you write it? Thank you in advance! – prtnkl Nov 30 '15 at 22:21
  • You can try with ng-change in your input and set the value to an object with the columns you want to filter – Igloob Dec 01 '15 at 08:20
  • Thanks, you save my day –  Dec 05 '17 at 04:53
0

i am modifying same code of @igloob this is work for filter all/any columns...

<!DOCTYPE html>
<html ng-app="filterExample">

<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="FilterController as filterCtrl">    

<input ng-model="search" />
<table>
  <tbody>
    <tr ng-repeat="item in filterCtrl.data | filter:search">
      <td>{{item.title}}</td>
      <td>{{item.message}}</td>
    </tr>
  </tbody>
</table>

<script>
  var filterModule = angular.module ("filterExample", []);

  filterModule.controller ("FilterController", function () {
  this.data = [{title:"abc", message:"def"}, {title:"aef", message:"jkl"},
  {title:"efg", message:"asc"}];

});
</script>
</body>

</html>
roshini
  • 112
  • 7