Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Search filter in AngularJS

Suggested Videos
Part 8 - AngularJS filters
Part 9 - Sorting data in AngularJS
Part 10 - AngularJS sort rows by table header



In this video we will discuss, how to implement search in Angular using search filter.



Search filter in AngularJS

As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed. 

Script.js :

var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope) {

            var employees = [
                { name: "Ben", gender: "Male", salary: 55000, city: "London" },
                { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
                { name: "Mark", gender: "Male", salary: 57000, city: "London" },
                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
                { name: "Todd", gender: "Male", salary: 60000, city: "London" },
            ];

            $scope.employees = employees;
        });

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        Search : <input type="text" placeholder="Search employees"
                        ng-model="searchText" />
        <br /><br />
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | filter:searchText">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary  }} </td>
                    <td> {{ employee.city  }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Styles.css :

body {
    font-family: Arial;
}

table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 5px;
}

th {
    border: 1px solid black;
    padding: 5px;
    text-align: left;
}

At the moment, the search is being done across all columns. If you want to search only one specific column, then change ng-model directive value on the search textbox as shown below. With this change only city column is searched.

<input type="text" ng-model="searchText.city" placeholder="Search employees" />

AngularJS tutorial for beginners

9 comments:

  1. Hi the above e.g is not working when i enter male in search text .

    ReplyDelete
    Replies
    1. because both male and female contains "male" text

      Delete
  2. Hello sir, when i enter Male in search text it is not working, request you to assist us for the same.

    ReplyDelete
    Replies
    1. It is working with MALE also, but you are not able to see the changes.
      Because all rows having "MALE" word (male and female both having MALE word), so when you type MALE all rows are valid and showing(Means,It's seems Nothing changing but it is valid).

      Delete
  3. we've additional column which contains date, when we search for character 'g' or 'w' then the proper result is not display in the table. it also shows the result which not contain the character 'g' or 'w'.

    ReplyDelete
  4. When i am adding a new column of date type then search is misbehaving...Like it doesnot search on first character eg: If i type T then the search doesnot work

    ReplyDelete
  5. How to make searchable dropdown in angular

    ReplyDelete
  6. hi this anil you are saying correct because the two words consists of both male and female the common is male it search properly but it does not excepted output as the end user excepted how it customization.

    ReplyDelete

It would be great if you can help share these free resources