AngularJS Common Filter Usage Method Summary

This example describes the common filter usage of AngularJS. Share to everyone for your reference, as follows:

The filter is used to format data that needs to be displayed to the user. The filter is called in the template binding symbol {{}} in HTML. The following is a commonly used filter.

Calcup filter

{Name | Uppercase}}} {Name | LowerCase}} /

: (Large-write filter)

last name:
name transfer Upress: {{student.fullname () | Uppercase}}

var app = angular.module ('app', []); app.controller ('myController', Function ($ scope) {$ scope .student = {firstName: "xu", lastName: "xiaohong", fullName: function () {var studentObject; studentObject = $ scope.student; return studentObject.firstName + studentObject.lastName;}};});

Currency filter
Currecy filter can format a value as a currency format. Use {{123 | currency}}To convert 123 into currency format. The Currecy filter allows us to set up currency symbols yourself. By default, the currency symbols in the area where the client is used, but the currency symbol can be customized. As shown in:

ENTER FeES: Fees: {{student.Fees | currency: ‘¥’}}

VAR App = Angular.Module (‘App’, []); App.Controller (‘MyController’, Function ($ Scope) {$ Scope.student = {Fees: 500};};

  Date Filter 
Date filter can format the date format into needed format. As shown in:
{Data | DATE: 'YYYY-MM-DD HH: mm: Ss eeee'}}
var APP = Angular.Module ('app', []); app.controller ('MyController', Function ($ scope) {$ = new date ();};


 The LimitTo filter is used to intercept the array or string, and receive a parameter to specify the length of the interception. Example:  
{{ChildrenArray | Limitto: 2}} var APP = aNgular.Module ('app', []); app.controller ('Test', Function ($ Scope) {$ Scope.childrenaRray = [{Name: 'Kimi', Age: 3}, {Name: 'Cindy' , AGE: 4}, {name: 'angrlar', age: 4}, {name: 'shitou', age: 6}, {name: 'Tiantian', Age: 5}];});
ORDERBY filter:

ORDERBY filter can sort an element in an array, receive a parameter Specify the sorting rule, the parameter can be a string, indicating that the name of the property is sorted. Can be a function, define the sorting properties. It can also be an array, indicating that the attribute values ​​in the array are sequentially sorted (if the value is equal to the value of the first item, then press the second item), or take the above children’s array:

{{ChildrenArray | Orderby: ‘Age’}} // Sort by the AGE attribute value
 {ChildrenArray | OrderBy: OrderFunc}}  // Sort by the return value of the function  {{ChildrenArray | Orderby: ['Age', 'Name']}}  // If the agent is the same, sorting according to NAME    
Custom Filter:

AngularJS Writing Custom Filter FormAnd AngularJS’s Factory Service is very similar, you must remember that it returns an object or a function, when writing, only one function with more than one parameter is needed. The format is approximately as follows:

App.Filter (‘Filter) Name’, function () {Return Function (I need filtering object, filter parameter 1, filtering Merverer parameter 2, …) {// … execute the object after the business logic code return processing;}});

  example: (first Letter capitalization) 
{{'Ginger Loves Dog Treats' | Capitalize}}
var App = Angular.Module ('App', []) App.Filter ('Capitalize', Function () {Return Function (Input) {if (input) {returnin input.charat (0) .touppercase () + Input.slice (1);}}})
More about AngularJS Related Contents Readers can view this topic: “AngularJS Directive Skills Summary”, “AngularJS Getting Started and Advanced Tutorial” and “Angularjs MVC Architecture Summary

It is hoped that this article will be helpful for the design of the AngularJS program.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment