Data Filtering in Angular.js Using Filter

DZone 's Guide to

Data Filtering in Angular.js Using Filter

Learn how to filter your big data in Angular.js so that only results that you want to see will be the results to pop up.

· Big Data Zone ·
Free Resource

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

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

  1. Create an ASP.NET empty web application named Angular_JS, as shown in the following screenshot:

    Web Application

  2. Add an HTML page to it named Search.html.


  3. Download the Angular.js file and save it to your website.

    Download the Angular

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

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

    adding the Angular.js in to the website

  5. Now, to write the code using directives and data binding expressions to the page.

    • Write the ng-app directive in the <html> tag that is necessary to initialize the Angular app: <html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>

    • Write the ng-init directive in the <div> tag that will initialize the data in the variable named names like in Array, as shown in the following code: <div ng-init="Days=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday', 'Sunday']"> </div>

    • 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”>

    • Write the ng-repeat directive with a 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>

    • 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

  6. Run the page.

    Run the page

  7. Type any letter in the TextBox, like f; you will see the days containing an f character.

    Data Filter

And that's it!

angular.js, big data, data analytics, data filtering, filter, javascript, tutorial

Published at DZone with permission of Rahul Bansal , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}