Angular Filters

# AngularJS Filters

« Previous
Next Chapter »

Filters can be added to expressions and directives using a pipe character.

## AngularJS Filters

AngularJS filters can be used to transform data:

Filter | Description
--- | ---
currency | Format a number to a currency format.
filter | Select a subset of items from an array.
lowercase | Format a string to lower case.
orderBy | Orders an array by an expression.
uppercase | Format a string to upper case.

## Adding Filters to Expressions

A filter can be added to an expression with a pipe character (|) and a filter.

(For the next two examples we will use the person controller from the previous chapter)

The uppercase filter format strings to upper case:

## AngularJS Example

<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Try it Yourself »

The lowercase filter format strings to lower case:

## AngularJS Example

<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Try it Yourself »

## The currency Filter

The currency filter formats a number as currency:

## AngularJS Example

<div ng-app="" ng-controller="costController">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
Try it Yourself »

## Adding Filters to Directives

A filter can be added to a directive with a pipe character (|) and a filter.

The orderBy filter orders an array by an expression:

## AngularJS Example

<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
Try it Yourself »

## Filtering Input

An input filter can be added to a directive with a pipe character (|) and filter followed by a colon and a model name.

The filter filter selects a subset of an array:

## AngularJS Example

<div ng-app="" ng-controller="namesController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
Try it Yourself »
« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples