pTutorial

New way to learn Programming

AngularJS Filter

AngularJS Filters

As the name filter can be used to transform the data. For example formatting a string to the lowercase. Filter can be used through the directives or expression by using the pipe (|) operator.

Here is some common filter used in AngularJS

Filters

Filter

Description

currency Change number to currency format
filter Select a subset of items from an array
lowercase Change a string to lower case
orderBy Orders an array by an expression
uppercase Change a string to upper case

Adding Filters to Expressions

You can add filter to the expression by using pipe operator ( | ) forward by filter

Uppercase Filter Example

<div ng-app="ukApp" ng-controller="ukController">

<p>The name is {{ name | uppercase }}</p>

</div> 

Lowercase Filter Example

<div ng-app="ukApp" ng-controller="ukController">

<p>The name is {{ name | lowercase }}</p>

</div> 

Currency Filter Example

<div ng-app="ukApp" ng-controller="costCtrl">

<input type="number" ng-model="rs">
<input type="number" ng-model="qua">

<p>Total = {{ (rs * qua) | currency }}</p>

</div>

Orderby filter

To order subjects by marks, we've used orderBy marks.

Currency Filter Example

<ul>
  <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER