AngularJS 里面的过滤器就是一个函数,它的作用就是将输入的数据经过格式化后再输出给user
Angular内置指令
在HTML的模板中使用 |
符号来调用过滤器。
//大写
{{ 'hello' | uppercase }} // HELLO
//将一个json或js的对象转化成字符串
{{ {name: 'xl', age: 23} | json }} // {'name': 'xl', 'age': 23}
//将数字格式转化成文本
{{ 123456789 | number }} // 123,456,789
//limitTo过滤器会根据传入的数字来返回新的数组或者字符串
{{'This is sunny day' | limitTo: 4}} // 'This'
{{['This', 'is', 'sunny', 'day'] | limitTo: 1 }} // ['This']
//date格式化日期
var time = (new Date()).valueOf();
{{ time | date }} // Oct 3, 2015
在Controller里面调用内置过滤器$filter
var app = angular.module('app', []);
app.controller('MainContainer', function($scope, $filter){
var time = (new Date()).valueOf();
$filter(date)(time, 'yyyy-MM-dd');
var string = 'Hello world';
$filter('uppercase')(string);
})
//$filter(date)(time, 'yyyy-MM-dd') 第一个括号里面的参数代表调用哪个内置过滤器,第二个括号里面的参数代表向过滤器中传入的参数,第一个是参数是需要被格式化的数据,第二个参数代表格式。
Angular自定义指令
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
});
app.filter('slice', function(){
return function(input){
return input.slice(2);
}
});
index.html
{{ 'Hello' | slice }} // 'llo'
向指令里传递参数
使用 :
来隔开每个参数
var app = angular.module('app', []);
app.controller('mainCtrl', function(){
});
app.filter('addString', function(){
return function(input, stringOne, stringTwo){
return input + ' ' + stringOne + ' ' + stringTwo;
}
})
index.html
{{ 'Hello' | addString:'world':'!!!' }}
// 'Hello world !!!'
过滤器优化
位于视图中的每个过滤器至少被调用2次,这是过滤器的本质。因此越是保持这些函数轻量及对它们进行优化,应用程序就会更快。
《Angular权威教程》里面对过滤器的优化提出了2种途径
一. 避免在视图中使用过滤器,尽可能在过滤逻辑移至控制器或服务中
二. 缓存过滤器的执行结果
参考资料:
Angular过滤器
Angular过滤器
AngularJS权威指南 1.2.x