AngularJs Search Filter Example

By | 2018-04-01T16:08:37+00:00 October 11th, 2016|angularjs|0 Comments

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 the Author:

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+ ,

Leave A Comment