How To Give Filters To The Ng-model

AngularJS | Filters

In that location are some filters that are added in the AngularJS for the sake of making the formatting and working with data easier. At that place are several in-congenital filters in AngularJS. They are listed here forth with some examples to make the understanding easier.

Bones Syntax:
Filters are generally added to the expressions by using the pipe (|) character.
For example, the filter {{ fullName | uppercase }} formats the fullName into the uppercase format.

Some of the pre-built filters in AngularJS are:

currency The number is formatted to currency format.
appointment The date is specified to a specific format.
filter The array is filtered on the footing of the provided criteria.
limitTo The assortment or an cord is limited into a specified number of elements/characters.
number A number if formatted to a string.
orderBy The assortment is ordered by an expression.
lowercase This filter converts a string to lowercase letters.
uppercase This filter converts a string to uppercase letters.
json Information technology converts a JavaScript object into a JSON string.

Currency Filter:
This filter simply formats a number as currency.

<!DOCTYPE html>

< html >

< script src =

</ script >

< body >

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

< h1 >Currency Format - GeeksforGeeks</ h1 >

< h2 >Price: {{ price | currency }}</ h2 >

</ div >

< script >

var app = angular.module('myApp', []);

app.controller('costCtrl', function($telescopic) {

$telescopic.toll = 20;

});

</ script >

</ body >

</ html >

Output:

Here, the dollar ($) sign has been added automatically in forepart of the numerical value.
Appointment Filter:
The date filter formats a date to a specified format.
Syntax:
```
{{ date | date : format : timezone }}
```
<!DOCTYPE html>

< html >

< script src =

</ script >

< body >

< div ng-app = "myApp" ng-controller = "datCtrl" >

< h1 >GeeksforGeeks - Date Filter</ h1 >

< p >Date = {{ today | date }}</ p >

</ div >

< script >

var app = angular.module('myApp', []);

app.controller('datCtrl', function($scope) {

$scope.today = new Date();

});

</ script >

</ body >

</ html >

Output:

Here, the date() function has been used and that displays the current date.
Filter:
This is used to display only the required objects. The filter selects a subset of an array.
For instance, This filter tin can exist used only on arrays every bit this returns an array containing just the matching items(condition given in the array).

<!DOCTYPE html>

< html >

< script src =

</ script >

< trunk >

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

< h1 >filter - GeeksforGeeks</ h1 >

< ul >

< li ng-echo = "x in names | filter : 'e'" >

{{ ten }}

</ li >

</ ul >

</ div >

< script >

angular.module('myApp', []).controller('namesCtrl',

office($telescopic) {

$telescopic.names = [

'Jani',

'Carl',

'Margareth',

'Hege',

'Joe',

'Gustav',

'Birgit',

'Mary',

'Kai'

];

});

</ script >

< p >This instance displays only the names

containing the letter "e".</ p >

</ body >

</ html >

Output:
limitTo Filter:
This filter returns an assortment or a string containing only a specified number of elements. The output will depend on the type of input that is given to the program. When used for arrays, it returns an array containing but the specified number of items.
In the case of the string, it returns a string containing, merely the specified number of characters, while when used for numbers, information technology returns a string containing simply the specified number of digits.
Syntax:
```
{{ object | limitTo : limit : begin }}
```
Here, limit specifies the number of elements to be displayed, while brainstorm specifies where to brainstorm the limitation from.

<!DOCTYPE html>

< html >

< script src =

</ script >

< trunk >

< div ng-app = "myApp" ng-controller = "sizeCtrl" >

< h1 >limitTo - GeeksforGeeks</ h1 >

< ul >

< li ng-echo = "ten in cars | limitTo : 4 : 1" >{{x}}</ li >

</ ul >

</ div >

< script >

var app = athwart.module('myApp', []);

app.controller('sizeCtrl', function($telescopic) {

$scope.cars = ["Audi",

"BMW",

"Dodge",

"Fiat",

"Ford",

"Volvo",

"Lamborghini"];

});

</ script >

< p >Filter practical from commencement

element to the 5th element.</ p >

</ body >

</ html >

Output:
orderBy Filter:
This is used for sorting an array. Strings (default alphabetically) and numbers (default ascending) can exist sorted using this filter.
Syntax:
```
{{ array | orderBy : expression : contrary }}
```
Here, the reverse can be used to contrary the social club of the resulting array.

<!DOCTYPE html>

< html >

< script src =

</ script >

< body >

< div ng-app = "myApp" ng-controller = "orderCtrl" >

< h1 >orderBy - GeeksforGeeks</ h1 >

< ul >

< li ng-repeat = "10 in customers | orderBy : 'city'" >

{{x.proper name + ", " + x.city}}

</ li >

</ ul >

</ div >

< script >

var app = athwart.module('myApp', []);

app.controller('orderCtrl', function($scope) {

$scope.customers = [{

"name": "Delhi"

}, {

"proper name": "Mumbai"

}, {

"name": "Patna"

}, {

"name": "Kolkata"

}, {

"name": "Pune"

}, {

"name": "Ranchi"

}, {

"proper name": "Bhopal"

}];

});

</ script >

< p >Sorting in ascending club.</ p >

</ torso >

</ html >

Output:
number Filter:
Probably the simplest filter. It simply formats a number to a string.
Syntax:
```
{{ string | number : fractionsize}}
```
Hither, 'fractionsize' specifies the number of decimals.

<!DOCTYPE html>

< html >

< script src =

</ script >

< torso >

< div ng-app = "myApp" ng-controller = "nCtrl" >

< h1 >number Filter - GeeksforGeeks</ h1 >

< h2 >Rs.{{money | number : 3}}</ h2 >

</ div >

< script >

var app = angular.module('myApp', []);

app.controller('nCtrl', function($scope) {

$scope.money = 999999;

});

</ script >

< p >The money is written with three decimals.</ p >

</ body >

</ html >

Output:
lowercase Filter:
This filter simply converts a cord to lowercase letters.
Syntax:
```
{{ string | lowercase }}
```
Let'southward accept a expect at an example to go clear about this filter.

<!DOCTYPE html>

< html >

< script src =

</ script >

< trunk >

< h2 >AngularJS - lowercase</ h2 >

< br >

< br >

< div ng-app = "myApp" ng-controller = "myCtrl" >

< strong >Input:</ strong >

< br >

< input blazon = "text" ng-model = "cord" >

< br >

< br >

< strong >Output:</ strong >

< br > {{string|lowercase}}

</ div >

< script >

var app = athwart.module('myApp', []);

app.controller('myCtrl', function($telescopic) {

$scope.cord = "";

});

</ script >

</ body >

</ html >

The code mentioned in a higher place asks the user for an input. Afterward the user enters a term in the input box, information technology gets stored in the ng-model="cord". Now, the AngularJS will resolve the expression, and return the result exactly where the expression is written. AngularJS expressions tin exist written inside double braces, similar this: {{ expression }}.
Output:

Hither in this lawmaking, the output {{string}} is displayed simply below the input box. However, to change the input string to lowercase, '|lowercase' must be added to the expression's proper name.

Therefore, {{string|lowercase}} will return the input string in the lowercase format.
upper-case letter Filter:
The uppercase Filter in AngularJS is used to change a string to uppercase string or letters.
Syntax:
```
{{ string | capital}}
```
<!DOCTYPE html>

< html >

< script src =

</ script >

< body >

< div ng-app = "myApp" ng-controller = "caseCtrl" >

< h1 >{{txt | upper-case letter}}</ h1 >

</ div >

< script >

var app = angular.module('myApp', []);

app.controller('caseCtrl', function($scope) {

$scope.txt = "GeeksforGeeks!";

});

</ script >

< p >The text is written in uppercase letters.</ p >

</ body >

</ html >

Output:
json Filter:
This filter but converts a JavaScript object into a JSON string, and this is very much useful while the debugging of applications.
Syntax:
```
{{ object | json : spacing }}
```
Here, spacing specifies the number of spaces to use per indentation. The default value is 2, however, this value is optional.

Have a look at this example code:

<!DOCTYPE html>

< html >

< script src =

</ script >

< body >

< div ng-app = "myApp" ng-controller = "jsCtrl" >

< h1 >GeeksforGeeks</ h1 >

< pre >{{customer | json : twenty}}</ pre >

</ div >

< script >

var app = angular.module('myApp', []);

app.controller('jsCtrl', role($telescopic) {

$scope.customer = {

"name" : "Milk",

"city" : "Patna",

"country" : "Bharat"

};

});

</ script >

< p >A JSON string with 20 spaces per indentation.</ p >

</ torso >

</ html >

Output:
Let's accept a look at the example of an array filter.

<!DOCTYPE html>

< html >

< body >

< h1 >GeeksforGeeks</ h1 >

< p >Click the button to go every chemical element

in the array that has a value of 38 or more.</ p >

< push button onclick = "myFunction()" >Endeavor information technology</ button >

< p id = "demo" ></ p >

< script >

var num = [23, 32, 56, 30, 56, 45, 34, 39];

function checkNum(num) {

return num >= 38;

}

function myFunction() {

document.getElementById(

"demo").innerHTML = num.filter(checkNum);

}

</ script >

</ body >

</ html >

On clicking the 'Endeavour information technology' push, all the elements in the array that has a value of 38 or more than gets printed to the screen.