AngularJS - 过滤器

在HTML中使用

{{ name | uppercase }} 

在JS中使用

• 需要引入$filter

    app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) {$scope.name = $filter('lowercase')('Ari'); //调用转小写的过滤器：lowercase来处理字符串：Ari}]);

给过滤器传值

{{ 123.456789 | number:2 }}

可以用 | 符号作为分割符来同时使用多个过滤器

自定义过滤器

example:

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

{{ 'ginger loves dog treats' | lowercase | capitalize }}

常用过滤器

currency

将一个数值格式化为货币格式

{{ 123 | currency }}

date

将日期格式化成需要的格式

{{ today | date:'medium' }} 
{{ today | date:'short' }} 
{{ today | date:'fullDate' }} 
{{ today | date:'longDate' }} 
{{ today | date:'mediumDate' }}
{{ today | date:'shortDate' }} 
{{ today | date:'mediumTime' }}
{{ today | date:'shortTime' }} 

filter

从给定数组中选择一个子集，并将其生成一个新数组返回

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} 

json

将一个JSON或JavaScript对象转换成字符串

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}

limitTo

根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取
决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取

{{ San Francisco is very cloudy | limitTo:3 }}


{{ San Francisco is very cloudy | limitTo:-6 }}

{{ ['a','b','c','d','e','f'] | limitTo:1 }}

lowercase

转小写

{{ "San Francisco is very cloudy" | lowercase }}

uppercase

转大写

{{ "San Francisco is very cloudy" | uppercase }}

number

将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数,如果传入了一个非数字字符，会返会空字符串。

{{ 123456789 | number }}

orderBy

可以用表达式对指定的数组进行排序

{{ 
[{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！