过滤器
1.用于将数据格式化后展现;
2.AngularJS内置多个过滤器,并支持自定义;
3.可以用在视图模板(templates)、指令(directives)、控制器(controllers)或者服务(services)中;
4.在视图模板或指令中使用运算符“|”添加过滤器;
5.在控制器或服务中使用$filter;
Angular共内置了9种过滤器,分别是
- 货币currency :
- 用于以货币形式显示数据,默认以$为货币符号,保留小数点后2位, 可以指定货币符号和保留位数,参数顺序不能颠倒,自动四舍五入;
如:{{num | currency:'¥':3}}
- 用于以货币形式显示数据,默认以$为货币符号,保留小数点后2位, 可以指定货币符号和保留位数,参数顺序不能颠倒,自动四舍五入;
- 数字number :
- 用于保留小数位数,自动四舍五入;
- 日期date:
- Date类型数据默认输出为与基准时间相差毫秒数
- 预定义格式:short、medium、shortDate、 mediumDate(默认格式)、longDate、fullDate、shortTime、mediumTime
- 自定义格式:使用字母y、M、d、h/H、m、s、E等自由组合
如:
<h1>{{now | date:"yyyy-MM-dd HH:mm:ss"}}</h1>
字符串大小写lowercase和uppercase
个数限制limitTo
- 用于截取部分字符串或数组,参数为正数表示截取开始部分,负数表示截取结尾部分;当参数超出数据长度,则返回原始数据;
- 当有两个参数时,第一个代表截取的长度,第二个代表索引;
如:
<h1>limitTo:2:3 :{{str | limitTo:5:3}}</h1>
<h1>limitTo:-2:-3 :{{str | limitTo:-5:-3}}</h1>
- JSON格式化json
- 用于将JSON对象或JavaScript对象转换为JSON格式字符串;
- 数据筛选filter
- 数据排序orderBy
过滤器在视图层的用法
{{表达式 | 过滤器1名称 : 参数a:参数b | 过滤器2名称 : 参数c : 参数d | … }}
<!--特别要注意过滤器的顺序!-->
<h1>{{123.3445 | number:3 | currency:'¥'}}</h1><!--123.35-->
<h1>{{123.3445 | currency:'¥':3 | number :2}}</h1><!--代码出错,已经不再是数字了,不显示 -->
过滤器在控制器层的用法
例:
<div ng-controller="FilterController">
<h2>{{num}}</h2>
<h2>{{str}}</h2>
</div>
法1:
angular.module('myApp', [])
.controller(
//在定义控制器时,将过滤器注入,格式为:过滤器名Filter;
//注入的过滤器作为函数使用,第一个参数为要过滤的数据,后面依次为过滤器所需参数;
'FilterController', ['$scope','currencyFilter','lowercaseFilter',
function($scope,cf,lcf){
$scope.str=lcf("Hello World");
$scope.num=cf(123.456789,'¥',3);
}])
法2:
.controller(
//当需要注入的过滤器较多时,也可以注入$filter服务,然后使用:$ft(“过滤器名”)(参数列表);如此处的str需要经过两层过滤。
'FilterController', ['$scope','$filter',
function($scope,$filter){
var tmp=$filter("number")(123.3445,3);
$scope.str=$filter("currency")(tmp,"¥");
}]);