Data Filtering in Angular.js Using Filter

This article shows how to use the "filter" that filters the data in Angular.js.

Note: I am using the Visual Studio 2012 IDE as an editor in this article, but you can use any kind of editor, like Notepad, Notepad++ and so on.

Some built-in filter

Step 1: Create an ASP.NET Empty Web Application named "Angular_JS" as in the following:

Web Application

Step 2: Add a HTML page into it named "Search.html".

html

Step 3: Download the Angular.js from the link Angularjs and save it into your website.

Download the Angular

Note: I am using Angular.min.js in this website.

Step 4: After adding the Angular.js into the website, write the script tag that will access the Angular file.

adding the Angular.js in to the website

Step 5: Now to write the code using Directives and Data binding expressions into the page.

a. Write the ng-app directive in the <html> tag, that is necessary to initialize the Angular app like:

<html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>

b. Write the ng-init directive in the <div> tag, that will initialize the data in the variable named "names" like in Array as in the following:

<div ng-init="Days=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday', 'Sunday']">    </div>

c. Use an <input> tag with type =”text” and write the ng-model directive with a string named "searchText" in it.

<input type =”text” ng-model =“searchText”>

d. Now write the ng-repeat directive with Days variable in a <div> tag like a foreach loop in C# with the filter: searchText that will filter the Days variable on the basis of the TextBox string.

<div ng-repeat="day in Days | filter:searchText"> </div>

e. In the end write Data Binding Expression of the variable "day" within the brackets syntax that will iterate the values of the "Days" variable as in the following:

{{day}}

Data Binding Expression 
 
Step 6: Run the page.
 
Run the page
Type any letter in the TextBox, like "f", now you will see the days containing a "f" character in it.
 
Data Filter