Latest web development tutorials

AngularJS filter

Filters can use a pipe character (|) to add to the expressions and instructions.


AngularJS filter

AngularJS filter can be used to convert the data:

filter description
currency Format numbers formatted as currency.
filter Selecting a subset of items from the array.
lowercase Format string to lowercase.
orderBy Array arrangement according to an expression.
uppercase Format string to uppercase.

Add Filter Expressions

Filter through a pipe character (|), and a filter is added to the expression. .

((Two examples below, we will use the previous section mentioned person controllers))

uppercase filter string formatted as uppercase:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "personCtrl">

<P> name is {{lastName | uppercase}} < / p>

</ Div>

try it"

lowercase filter to lowercase string formatting:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "personCtrl">

<P> name is {{lastName | lowercase}} < / p>

</ Div>

try it"

currency filter

currency digital filter will be formatted as currency format:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "costCtrl">

<Input type = "number" ng -model = "quantity">
<Input type = "number" ng -model = "price">

<P> total price = {{(quantity * price) | currency}} </ p>

</ Div>

try it"

Add filters to the instruction

Filter through a pipe character (|), and a filter is added to the directive.

orderBy filter array arrangement according to the expression:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "namesCtrl">

<Ul>
<Li ng-repeat = "x in names | orderBy: 'country'">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

<Div>

try it"

Filter input

Input filter through a pipe character (|), and a filter is added to the directive, the filter followed by a colon and a model name.

filter filters select a subset from the array:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "namesCtrl">

<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"