This article describes the common usage of AngularJS filters. Share it for your reference, as follows:
Filters are used to format the data to be displayed to the user. The filter is called in the template binding symbol {{ }} in HTML via the | symbol. The following are commonly used filters.
Case filter
{{ name | uppercase }} Caps filter
{{ name | lowercase}} lowercase filter
Example: (caps filter)
<div ng-controller='myController'>
Last name: <input type="text" ng-model=""></br></br>
name: <input type="text" ng-model=""></br></br>
name转大写: {{() | uppercase}}
</div>
<script>
var app=('app',[]);
('myController',function($scope){
$={
firstName: "xu",
lastName: "xiaohong",
fullName:function(){
var studentObject;
studentObject = $;
return + ;
}
};
});
</script>
Currency filter
The currecy filter can format a value into currency format. Use {{ 123 | currency }} to convert 123 into currency format. The currecy filter allows us to set the currency symbol ourselves. By default, the currency symbols of the client's area are used, but you can also customize the currency symbols. as follows:
<div ng-controller='myController'>
Enter fees: <input type="text" ng-model=""></br>
fees: {{ | currency:'￥'}}
</div>
<script>
var app=('app',[]);
('myController',function($scope){
$={
fees:500
};
});
</script>
Date filter
The date filter can format dates into the desired format. as follows:
<div ng-controller='myController'>
{{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
</div>
<script>
var app=('app',[]);
('myController',function($scope){
$=new Date();
});
</script>
limitTo filter
The limitTo filter is used to intercept an array or string, and receives a parameter to specify the length of the intercept. Example:
<body ng-controller="test">
{{ childrenArray | limitTo : 2 }}
<script>
var app=('app',[]);
('test',function($scope){
$ = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
});
</script>
</body>
orderBy filter:
The orderBy filter can sort elements in an array and receive a parameter to specify the sorting rules. The parameter can be a string that indicates sorting by the attribute name. It can be a function that defines sorting properties. It can also be an array that means sorting by the attribute values in the array in turn (if the values compared by the first item are equal, then compare by the second item), or take the above child array as an example:
<div>{{ childrenArray | orderBy : 'age' }}</div> //Sort by age attribute value<div>{{ childrenArray | orderBy : orderFunc }}</div> //Sort by the return value of the function<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //If the age is the same, sort by name
Custom filters:
The form of writing custom filters in AngularJS is very similar to AngularJS factory service. Remember to return an object or a function. When writing, you only need a function with more than one parameter. The format is roughly as follows:
('filter(Filter)name',function(){
return function(Objects that need to be filtered,Filter参数1,Filter参数2,...){
//...Execute business logic code return Processed object;
}
});
Example: (Capital letter)
{{ 'ginger loves dog treats' | capitalize }}
<script>
var app=('app',[]);
('capitalize',function(){
return function(input){
if(input){
return (0).toUpperCase() + (1);
}
}
})
</script>
For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》
I hope this article will be helpful to everyone's AngularJS programming.