How to restrict AngularJS Search Filter to a Specific Column?

How to restrict AngularJS Search Filter to a Specific Column?

Among many Advanced features of AngularJS Search Filter is One. Like JavaScript we don’t required to write a Search function. Simply by using the Keyword Filter with directives we can implement Search option in AngularJS.

Look at the below Example. Here I have JSON formatted data in employees object of $scope. For each employee record there are 5 columns name, dob, designation, gender & salary. What I want is when I will search using a input box I need to filer records depending upon employees names only.

To do so while binding data using ng-repeat I am using “employee in employees | filter:{name:search}”. By default filter keyword search all the columns from employees object. To restrict Search to specific column employee name here I am passing name:search as a param to filter option.

Example to restrict AngularJS Search Option

<!DOCTYPE html>
<html ng-app="CusFilterMod">
<title>How to restrict AngularJS Search Filter to a specific column?</title>
<style type="text/css">
th { background: #000000; color: #ffffff; border: 1px solid grey; border-collapse: collapse; }
table, td  { border: 1px solid grey; border-collapse: collapse; padding: 5px; }
table tr:nth-child(odd)    { background-color: #f1f1f1; }
table tr:nth-child(even) { background-color: #ffffff; }
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var CusFilterMod = angular.module('CusFilterMod', [])
.controller('CusFilterCtrl', ['$scope', '$filter', function($scope, $filter) {
var employees = [{
name: 'Rishika Malviya',
dob: new Date("January 20, 1985"),
designation: 'Project Manager',
gender: 'Female',
salary: 25000
}, {
name: 'Niraja Nayak',
dob: new Date("February 25, 1995"),
designation: 'Manager',
gender: 'Male',
salary: 45000
}, {
name: 'Biswabhusan Panda',
dob: new Date("December 12, 1970"),
designation: 'Team Leader',
gender: 'Male',
salary: 25500
}, {
name: 'Ravi Sakalkar',
dob: new Date("October 1, 1985"),
designation: 'Business Head',
gender: 'Female',
salary: 55000
name: 'Punam Nikam',
dob: new Date("November 10, 1955"),
designation: 'Graphics Designer',
gender: 'Male',
salary: 75000
$scope.employees = employees;
<div ng-controller="CusFilterCtrl">
Search <input type="text" ng-model="search" placeholder="Search Employees">
<br />
<br />
<tr ng-repeat="employee in employees | filter:{name:search}">
<td>{{ | uppercase }}</td>
<td>{{ employee.dob | date:"MMM dd, yyyy" }}</td>
<td>{{ employee.designation }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.salary | currency:"$":2 }}</td>