Detailed Angularjs filter (filter) Usage _angularjs

Source: Internet
Author: User
Tags lowercase


ANGULARJS filter, the Chinese name "filter" is used to filter the value of variables, or format the output, get their desired results or format dongdong.



Introduction to Filter



Filter is used to format data.



The basic prototype of filter (' | ' similar to the pipe mode in Linux):

{{expression | filter}}


Filter can be used in a chained style (that is, multiple filter is used continuously):


{{expression | filter1 | filter2 | ...}}



Filter can also specify multiple parameters:


{{expression | filter:argument1:argument2: ...}}


First, use in view Template



Apply Filters (filter) in an expression



You need to follow the format as follows:



{{expression | filter}}} {{expression | filters}}



For example: {{a | currency}} output is $12.00






Apply Filters (filter) in output results



The popular point is the superposition of the filter--the output result of the previous filter as the input data source of the latter filter.



You need to follow the format as follows:



{{expression | filter1 | filter2 | ...}} The expression (expression) use Filter1 filter and then use Filter2 filter ...






Filter with parameters



Filter can be followed by one or more parameters to help implement the special requirements, the requirements of filter.



You need to follow the format as follows:



{{expression | filter:argument1:argument2: ...}}



Example: {{1234 | number:2}} = 1,234.00






Second, use ANGLUARJS built-in filter



ANGULARJS provides us with 9 built-in filters.



respectively, currency, date, filter, JSON, LimitTo, uppercase, lowercase, number, by.



The specific usage is described in detail in the ANGULARJS documentation. Here are just a few commonly used.



Currency Filter (currency filter)



currency– is used to convert variables into currency representations



such as: {{amount | currency}}






Uppercase/lowercase Filter (letter case Filter)



Such as:



{{' Lower cap string ' | uppercase}}
<input ng-model= "Userinput" > uppercased: {{userinput | uppercase}}






Date Filter (date filter)



Such as:



{{1304375948024 | date}}
{{1304375948024 | date: ' mm/dd/yyyy @ H:mma '}}






JSON filter



Such as:



{{{foo: ' Bar ', baz:23} | json}}






Use filter in controllers, services, and Drictives



You can use filter in ANGULARJS's controller, service, or driective, where you need to add the dependent filter name to controller, service, or directive dependencies.



Use filter directly in controller so that controller can call filter at the right time according to its own needs






Three, custom filter (filter)



Angularjs Write a custom filter in the form of a ANGULARJS factory service is very similar, must remember that it returns an object or a function can be written, only need a function with more than one parameter.



The format is roughly as follows:

App.filter (' Filter name ', function () {return 

function (object to filter, filter parameter 1, filter parameter 2,...) { 

//... An object that performs business logic code return 

processing; 

 
 




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.