1. Home
  2. AngularJS filter

The best AngularJS filter Tutorial In 2024, In this tutorial you can learn AngularJS filter,Add Filter Expressions,AngularJS examples,AngularJS examples,currency filter,AngularJS examples,Add filters to the instruction,AngularJS examples,Filter input,AngularJS examples,

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>

lowercase filter to lowercase string formatting:

AngularJS examples

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

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

</ Div>

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>

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>

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>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

AngularJS filter
10/30