Detailed explanation of the use of AngularJS filters_AngularJS
AnularJS filters are used to format the data that needs to be displayed to users. There are many practical built-in filters, and you can also write them yourself.
Call the filter through the | symbol within the template binding symbol {{ }} in HTML. For example, let's say we want to convert the string
To convert to uppercase, you can convert each character in the string individually, or you can use a filter:
{{ name | uppercase }}
Filters can be called through $filter in JavaScript code. For example, using lowercase
in JavaScript code
Filter:
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);When using filters in the form of HTML, if you need to pass parameters to the filter, just add a colon after the filter name
That’s it. If there are multiple parameters, you can add a colon after each parameter. For example, a numeric filter can limit the number of decimal places
The number of digits, write: 2 after the filter, you can pass 2 as a parameter to the filter:
<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}1. currency
The currency filter can format a numeric value into currency format. Use {{ 123 | currency }} to convert 123
into currency format.
The currency filter allows us to set the currency symbol ourselves. By default, the currency symbol of the client's region will be used,
But you can also customize currency symbols.
2. date
The date filter can format the date into the required format. There are several date formats built into AngularJS, if not
Specify any format to use. The mediumDate format will be used by default. This format is shown in the example below.
The following are the built-in supported localized date formats:
{{ 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-digit year: {{ today | date:'yyyy' }}
Two-digit year: {{ today | date:'yy' }}
Year: {{ today | date:'y' }}
Month formatting
English month: {{ today | date:'MMMM' }}
English month abbreviation: {{ today | date:'MMM' }}
Numeric month: {{ today |date:'MM' }}
Month of the year: {{ today |date:'M' }}
Date formatting
Numeric date: {{ today|date:'dd' }}
Day of the month: {{ today | date:'d' }}
English day of the week: {{ today | date:'EEEE' }}
English week abbreviation: {{ today | date:'EEE' }}
Hour formatting
24-hour digital hour: {{today|date:'HH'}}
Hour of the day: {{today|date:'H'}}
12-hour digital hour: {{today|date:'hh'}}
Hour in the morning or afternoon: {{today|date:'h'}}
Minute formatting
Numeric minutes: {{ today | date:'mm' }}
Minute of the hour: {{ today | date:'m' }}
Seconds formatting
Numeric seconds: {{ today | date:'ss' }}
The second in a minute: {{ today | date:'s' }}
Number of milliseconds: {{ today | date:'.sss' }}
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
filter filter can select a subset from the given array and generate a new array and return it.
For example, use the following filter to select all words containing the letter e:
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->If you want to filter objects, you can use the object filter mentioned above. For example, if you have a
consisting of people objects
Array, each object contains a list of their favorite foods, which can be filtered in the following form:
{{ [{
'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"}] -->
You can also use a custom function for filtering (in this example the function is defined on $scope):
{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->
The function of isCapitalized function is to return true or false according to whether the first letter is capitalized, as shown below:
$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};
Custom filters
First, create a module to reference in the application
angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
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 uppercase first
Write, then convert the first letter to uppercase:
<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}
The above is how to use AngularJS filters. I hope it will be helpful to everyone's learning.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue error: The filter in filters cannot be used correctly, how to solve it?
Aug 26, 2023 pm 01:10 PM
Vue error: The filter in filters cannot be used correctly, how to solve it? Introduction: In Vue, filters are a commonly used function that can be used to format or filter data. However, during use, sometimes we may encounter problems with not being able to use the filter correctly. This article will cover some common causes and solutions. 1. Cause analysis: The filter is not registered correctly: Filters in Vue need to be registered before they can be used in templates. If the filter is not successfully registered,
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
Use PHP and AngularJS to build a responsive website to provide a high-quality user experience
Jun 27, 2023 pm 07:37 PM
In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency
How to filter and sort data in Vue technology development
Oct 09, 2023 pm 01:25 PM
How to filter and sort data in Vue technology development In Vue technology development, data filtering and sorting are very common and important functions. Through data filtering and sorting, we can quickly query and display the information we need, improving user experience. This article will introduce how to filter and sort data in Vue, and provide specific code examples to help readers better understand and use these functions. 1. Data filtering Data filtering refers to filtering out data that meets the requirements based on specific conditions. In Vue, we can pass comp
PHP Email Filter: Filter and identify spam.
Sep 19, 2023 pm 12:51 PM
PHP Email Filter: Filter and identify spam. With the widespread use of email, the amount of spam has also continued to increase. For users, the amount of spam they receive can lead to information overload and wasted time. Therefore, we need an efficient method to filter and identify spam emails. This article will show you how to write a simple but effective email filter using PHP and provide specific code examples. Basic Principle of Email Filter The basic principle of email filter is to determine whether the email is
Filter function in Vue3: handle data elegantly
Jun 18, 2023 pm 02:46 PM
Filter Functions in Vue3: Handling Data Elegantly Vue is a popular JavaScript framework with a large community and a powerful plug-in system. In Vue, the filter function is a very practical tool that allows us to process and format data in templates. There have been some changes to the filter functions in Vue3. In this article, we will take a deep dive into the filter functions in Vue3 and learn how to use them to handle data gracefully. What is a filter function? In Vue, the filter function is
In PHP, the FILTER_VALIDATE_URL constant represents the filter used to validate URLs
Sep 14, 2023 am 10:37 AM
The FILTER_VALIDATE_URL constant is used to validate URLs. The flag FILTER_FLAG_SCHEME_REQUIRED−URL must be RFC compliant. FILTER_FLAG_HOST_REQUIRED−URL must contain the hostname. FILTER_FLAG_PATH_REQUIRED−URL must have a path after the domain name. FILTER_FLAG_QUERY_REQUIRED−URL must have a query string. Return value FILTER_VALIDATE_URL
Tips for using plug-ins to implement custom filters in Vue
Jun 25, 2023 pm 05:01 PM
Tips for using plug-ins to implement custom filters in Vue Vue.js provides a convenient way to handle the need for view data filtering, that is, filter. Filters are mainly responsible for formatting and processing the data in the view to make the data more intuitive and easy to understand. Vue has some built-in commonly used filters, such as date formatting, currency formatting, etc., and also supports custom filters. This article will introduce how to use the Vue plug-in to implement custom filters and provide some practical filtering techniques.
