在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务于页面模板,在控制器和页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性。
一、过滤器的表现形式
在angular中有三种变现形式,通过管道字符 “ | ”,与需要处理的代码进行连接,看代码:
1、单个过滤器,如:{{表达式 | 过滤器名}}
货币过滤器 {{8.88 | currency}} // $8.88
2、多个过滤器,如:{{表达式 | 过滤器名1 | 过滤器名2 | ...}}
{{8.88 | currency | filter | ...}}
3、带参数过滤器,如:{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}
{{8.88 | number : 1}}
二、angular中自带的九种过滤器
1、currency格式化数字为货币格式。
1 {{ 8.88 | currency }}// 默认为$8.88 2 3 {{ 8.88 | currency : "¥"}} // ¥8.88
2、lowercase过滤器将字符串格式化为小写
1 姓名为{{ lastName | lowercase }} // zhang $scope.lastName="ZHANG"
3、uppercase过滤器将字符串格式化为大写
{{ lastName | uppercase }} // ZHANG $scope.lastName="zhang"
4、orderBy过滤器根据表达式排列数组
1 // 根据id降序排序 2 3 {{[{"age":20,"id":10,"name":"iphone"}, 4 5 {"age":12,"id":11,"name":"sunm xing"}, 6 7 {"age":44,"id":12,"name":"test abc"}] 8 9 | orderBy:'id':true}} 10 11 // 根据id升序排序 12 13 {{[{"age":20,"id":10,"name":"iphone"}, 14 15 {"age":12,"id":11,"name":"sunm xing"}, 16 17 {"age":44,"id":12,"name":"test abc"}] 18 19 | orderBy:'id'}}
5、filter查找
1 // 查找name为iphone的行 2 3 {{[{"age":20,"id":10,"name":"iphone"}, 4 5 {"age":12,"id":11,"name":"sunm xing"}, 6 7 {"age":44,"id":12,"name":"test abc"}] 8 9 |filter:{'name':'iphone'}}}//输出的话就是{"age":20,"id":10,"name":"iphone"}
6、limitTo 截取
1 {{"1234567890"|limitTo:6}}// 从前面开始截取6位 2 3 {{"1234567890"|limitTo:-4}}// 从后面开始截取4位
7、date 时间格式化
1 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25
8、number 格式化(保留小数)
1 {{149016.1945000|number:2}} //149016.19
9、 json (格式化json对象)
json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:
1 {{ jsonTest | json}}
三、angular自定义过滤器
方法:
1 app.filter('name', function() { 2 3 return function(input, char) { 4 5 return 自定义你的过滤器 6 7 } 8 9 }
1 app.filter('capitalize', function() { 2 3 //input 需要过滤的元素 4 5 //char位置,索引减一 6 7 return function(input, char) { 8 9 if(isNaN(input)) { 10 11 //如果序号位置没有设置,索引位置默认是0 12 13 var char = char - 1 || 0; 14 15 //把过滤元素索引位置上的字母转换成大写 16 17 var letter = input.charAt(char).toUpperCase(); 18 19 var out = []; 20 21 for(var i = 0; i < input.length; i++) { 22 23 if(i == char) { 24 25 out.push(letter); 26 27 } else { 28 29 out.push(input[i]); 30 31 } 32 33 } 34 35 return out.join(''); 36 37 } else { 38 39 return input; 40 41 } 42 43 } 44 45 });