Details on the use of AngularJS filters

  • 2021-01-25 07:11:46
  • OfStack

AnularJS's filters are used to format the data that needs to be presented to the user. There are many useful built-in filters, or you can write your own.

In HTML template symbols within {{}} to call filter by | symbols. For example, suppose we want to convert a string
To uppercase, each character in the string can be converted individually, or a filter can be used:

{{ name | uppercase }}
In JavaScript code, you can call the filter with $filter. For example, use lowercase in JavaScript code
Filter:


app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

When using a filter in HTML form, if you need to pass parameters to the filter, you simply add a colon after the filter name
Can. If you have more than one argument, you can add a colon after each argument. For example, numerical filters can limit after the decimal point
After the filter, write :2. You can pass 2 as an argument to the filter:


<!--  Display: 123.46 -->
{{ 123.456789 | number:2 }}

1. currency
The currecy filter can format 1 numeric value in currency format. With {{123 | currency}} to turn 123
In currency form.
The currecy filter allows us to set our own currency symbol. By default, the currency symbol of the client's region is used,
But you can also customize the currency symbol.
2. date
The date filter can format the date to the desired format. AngularJS has several date formats built in, if not
To specify any format, the default is mediumDate, which is shown in the following example.
Here are the built-in date formats that support localization:


{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

Year formatting
Four year: {{today | date: 'yyyy'}} < !-- 2013 -- >
Two year: {{today | date: 'yy'}} < !-- 13 -- >
1 year: {{today | date: 'y'}} < !-- 2013 -- >
Month formatting
In English: {{today | date: 'MMMM'}} < !-- August -- >
In English abbreviations: {{today | date: 'MMM'}} < !-- Aug -- >
In digital: {{today | date: 'MM'}} < !-- 08 -- >
1 how many months of the year: {{today | date: 'M'}} < !-- 8 -- >
Date formatting
Digital date: {{today | date: 'dd'}} < !-- 09 -- >
How many days in a month: {{today | date: 'd'}} < !-- 9 -- >
The English week: {{today | date: 'EEEE'}} < !-- Thursday -- >
Week in English abbreviations: {{today | date: 'EEE'}} < !-- Thu -- >
Hour formatting
24-hour digital hours: {{today | date: 'HH'}} < !--00-- >
1 how many hours of the day: {{today | date: 'H'}} < !--0-- >
12 hours making digital: {{today | date: 'hh'}} < !--12-- >
How many hours of the morning or afternoon: {{today | date: 'h'}} < !--12-- >
Minute formatting
Digital minutes: {{today | date: 'mm'}} < !-- 09 -- >
How many minutes in an hour: {{today | date: 'm'}} < !-- 9 -- >
Number of seconds formatting
Number of seconds: {{today | date: 'ss'}} < !-- 02 -- >
How many seconds in one minute: {{today | date: 's'}} < !-- 2 -- >
Milliseconds: {{today | date: 'sss'}} < !-- .995 -- >
Here are some examples of custom date formats:


{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

filter

The ES195en filter can select a subset from a given array and generate a new array to return.

For example, all words containing the letter e can be selected with the following filter:


{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

If you want to filter objects, you can use the object filters mentioned above. For example, if you have one that consists of an people object
Array, where each object contains a list of their favorite foods, can be filtered as follows:


{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

Filtering can also be done using custom functions (in this case defined on $scope) :


{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

The isCapitalized function returns true or false based on whether the initial letter is uppercase or not, as shown below:


$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

Custom filter

First, create a module to reference in the application


angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input That's the string that we passed in 
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

Now, if you want to convert the first letter of a sentence to uppercase, you can use the filter to convert the entire sentence to small first
Write, and then convert the initial letter to uppercase:


<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

The above is the use of AngularJS filter, I hope to help you learn.


Related articles: