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 :

[html]
<!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>

[/html]

Output :

[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/Angular_Search_Filter.html”]

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

Leave A Comment