脚本宝典收集整理的这篇文章主要介绍了Angular学习笔记($filter),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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
以上是脚本宝典为你收集整理的Angular学习笔记($filter)全部内容,希望文章能够帮你解决Angular学习笔记($filter)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。