Tuesday , March 28 2017
Home / angularjs / AngularJs Search Filter Example

AngularJs Search Filter Example

In this tutorials we are going to implementing the most useful functionality of AngularJs search.

The example demonstrates an employee table which having the information about employee  name , id, dept number. Here we are going to filter employees based on name and based on department ids presented in dropdown.

AngularJs Search Filter Example :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Filter Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("employeeCotroller", function($scope) {
        $scope.employees = [ {
            empId:1001,
            empName : "john",
            deptId : "3005",
        }, {
            empId:1002,
            empName : "scott",
            deptId : "3006",
        }, {
            empId:1003,
            empName : "james",
            deptId : "3005",
        } , {
            empId:1004,
            empName : "smith",
            deptId : "3001",
        } , {
            empId:1005,
            empName : "adam",
            deptId : "3001",
        } , {
            empId:1006,
            empName : "philips",
            deptId : "3005",
        } , {
            empId:1007,
            empName : "chandra",
            deptId : "3008",
        }, {
            empId:1008,
            empName : "shekhar",
            deptId : "3007",
        }, {
            empId:1009,
            empName : "rahul",
            deptId : "3007",
        }, {
            empId:1010,
            empName : "dravid",
            deptId : "3001",
        }]
    })
</script>
</head>
<body ng-app="myApp">
    <h1>AngularJs Searching using Filters</h1>
    <br><br>
    Enter Employee Name To Search :
    <input type="text" ng-model="searchByName"/>
    <br><br>
    Select Departmet to Search :
    <select ng-model="searchByDept">
        <option value="">All</option>
        <option>3001</option>
        <option>3005</option>
        <option>3006</option>
        <option>3007</option>
        <option>3008</option>
    </select>
    <br><br>
    <table ng-controller="employeeCotroller" border="2">
        <tr style="background-color:green">
            <td>Employee Id</td>
            <td>Employee Name</td>
            <td>Department Id</td>
        </tr>
        <tr ng-repeat="employee in employees | filter:{'empName':searchByName,'deptId':searchByDept}">
            <td>{{employee.empId }}</td>
            <td>{{employee.empName }}</td>
            <td>{{employee.deptId }}</td>
        </tr>
    </table>
</body>
</html>

Output :

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *