Search filter in AngularJS

angularjs search filter example
angularjs search box example

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

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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

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" },
];

});

[!DOCTYPE html]
[head]
[title][/title]
[/head]
[body ng-app="myModule"]
[div ng-controller="myController"]
Search : [input type="text" ng-model="searchText" placeholder="Search employees" /]
[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"]
[/tr]
[/tbody]
[/table]
[/div]
[/body]
[/html]

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.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[kurtyssbishop]

I have read many books and watched many videos on Angularjs, yours is the clearest I've come across. Thanks for your teaching genius.

[nikhilsharma]

just one thing...you are one of the reasons for my interest in Angularjs..thanks man for elaborating it so beautifully and making me comfortable with it.

[jmccormac]

This tutorial series is excellent. the ordering of the videos matches perfectly a project I am doing and things I would like to do next keep appearing in the following videos! perfect! Thank you.

[yashemt]

Hi Kudvenkat.. I had watched lots of videos regarding Angularjs but seriously your example and way of explanation is brilliant... Thankx a lot..

[eljefe]

Great Job. Your explanations are very clear and you have an excellent ability to build upon each lesson. Your lessons are also very organized. Thank you.

[rajvirsarkar]

Your each and every video very easy to understand. Great job dear.
Thanks a lot.

[pointjabber]

I have to say your videos are really helpful. Thank you. God bless.

[sadajuyar]

I have a question. Both: "searchText" and "employee" objects have a property named "city", but why (or how) are they linked to act as a filter if they are two different objects?

Thanks for your videos!

[SuperGogineni]

This Angular course is designed for real-time Developers, Thank you very much for videos

[jtst]

Thanks a lot for this. Just one question, how could you set a filter for more than one column? Let's say I want to search within name and city at the same time...

[amitsumit]

Thanks for video. It is very much clear for beginner.

[ClaudioLichtenthal]

EXCELLENT TUTORIALS !!! Great pace. Great explanations. I am learning tons!!! Do you have any videos which compare Angular to React ? (I want to hear YOU explain it ! ;-)

[waelmrabet]

Thank you, you made it clear and simple

[MersedessBens]

very clear and understandable tutorials! Thank you very much!)

[RekhaKumari-vguq]

All your videos are excellent.   Your videos are helped me to get a job in .NET.   Thank you very much and God bless you.

[terrythomas]

I agree, useful and clear..thank you.

[nageshsrinivas]

Thank you vekat sir for your great tutorials. I have one doubt here we have tied the city field to employees model and we are looping our list of employees .How does searchText.city get linked to filtering employees

[rupenanjaria]

Did not get this..How by adding .city changed the filter? What if I want to filter by multiple columns? What is the concept here?

[Rhyckthegreat]

I have this process working but the only issue is that the search filter is only limited to the loaded data in scope. how to make the search to expand the search on the table in sql server ? I would like the search filter to also fetch data on the server.

[ardisuhendar]

Thanks for the great videos. Just one question: why does searchtext.city work? searchtext is a ng-model name, which is arbitrary rite?