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 an HTML page into it named "Search.html".
![HTML]()
Step 3. Download the Angular.js from the link Angularjs and save it to 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.
![Website]()
Step 5. Now write the code using Directives and Data binding expressions into the page.
a. Write the ng-app directive in the <html> tag, which is necessary to initialize the Angular app.
<html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>
b. Write the ng-init directive in the <p> tag, which will initialize the data in the variable named "names" like in Array as in the following.
<p ng-init="Days=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday', 'Sunday']"> </p>
c. Use a <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 the Days variable in a <p> tag like a for each loop in C# with the filter: searchText that will filter the Days variable on the basis of the TextBox string.
<p ng-repeat="day in Days | filter:searchText"> </p>
e. In the end write the 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", and now you will see the days containing an "f" character in it.
![Data Filter]()