Please enable Javascript for better experience...
How to implement filter in Angular JS
By Big | Feb 24, 2015 | In Tips | Update: May 21, 2016 | Total Views [ 1241 ]
Taged In
(0 Like)
Rate

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.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment