AngularJS filter can be used to implement filters in grid or tabular data with the help of filter attribute separated by pipe (|) sign.

The Problem

Adding filters to your grid or table is very easy with the help of angular js. You can apply filter on all the columns or on a particular column also. Let's see how to do this.

The Solution

Follow below steps to add angular js filter to your table.

Module.Js

Add Module.js file and copy below code to the file.

var app;

(function () {
    app = angular.module("MyApp", []);
})();

Person.angular.Js

Add below code to Person.angular.js file.

app.controller("PersonController", function ($scope) {
debugger;
 $scope.Persons = [{name: "Dee John", age: 50, contact: 9999944567},
{name: "Shinara Chang", age: 32, contact:9999345120},
 {name: "Jacob", age: 27, contact:8899004567},
{name: "Alen Mee", age: 56, contact:7544335698},
  {name: "Tom", age: 34, contact:9888887767}];

});

Exmaple.html

Add below references to example.html

    <script type="text/javascript" src="JS/angular.js"></script>
     <script type="text/javascript" src="JS/angular/module.js"></script>
      <script type="text/javascript" src="JS/angular/person.angular.js"></script>

Copy below code to create table with filter.

Use [FilterName] or [FilterName.$] to search all and use [FilterName.PropertyName] to enable search by specific property.

<div class="body-content" ng-app="MyApp" ng-controller="PersonController">
        <h3>angularJS Filter-Example</h3>
    <hr />

       Search All: <input class="txt" ng-model="searchPattern.$"> Search By Name: <input class="txt" ng-model="searchPattern.name">
    <br/><br/>
<table id="person1" class="table table-striped table-bordered" cellspacing="0" style="width:100%;" >
  <tr><th>Name</th><th>Phone</th><th>Contact No</th></tr>
  <tr ng-repeat="item in Persons | filter:searchPattern">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>

In above example ng-model="searchPattern.$" will search all columns table but ng-model="searchPattern.name" will search only name column. To enable filter I declared filter:searchPattern with pipe (|) sign in table.

Output

In above example if you search 50 in search all box, you will find a record matching with your search.

Now let's find 50 in search by name box. See there is no result as output. It means this box has restricted filter and will work only on name column.

Let's try this out. Seach Jacob in this box. Wow you will result mathcing your search.

In above exmple you have seen filter using search all criteria as well as restrcited to a particular column. Hope this help you. Please download demo source code for more info.