Data Filtering in Angular.js Using Filter

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

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