Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

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.

    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!

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

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

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}