第219天:Angular---过滤器

 在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 });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Java基础-day01-基础题

1. 简述java语言,具有哪些特性? (1).java语言是简单的 java语言是和c++语言类似的,其次java中丢弃了c++中一些难理解的特性,比如运算符...

2854
来自专栏C/C++基础

C++ new的三种面貌

C++中使用new运算符产生一个存在于Heap(堆)上对象时,实际上调用了operator new()函数和placement new()函数。在使用new创建...

1091
来自专栏coding for love

JS入门难点解析8-作用域,作用域链,执行上下文,执行上下文栈等分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1121
来自专栏武军超python专栏

2018年7月24日初次接触面向对象

昨天io模块知识的回顾补充: 用json模块可以把程序中的数据转换为字符串类型存储到文件中,但是字符串类型不安全,可以用记事本 直接打开查看里面的的所有内容

1323
来自专栏技术/开源

从C#到TypeScript - Promise

从C#到TypeScript - Promise 背景 相信之前用过JavaScript的朋友都碰到过异步回调地狱(callback hell),N多个回调的嵌...

2108
来自专栏Java帮帮-微信公众号-技术文章全总结

Java面试系列2

六、&和&&的区别? &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 七、swtich是否能作用在byte上,是否能作用在long上,是否...

2966
来自专栏大数据

在Python中什么时候用Yield什么时候用Return

许多Python开发人员在代码中使用yield,而不考虑他们是否真的需要。这篇文章解释了你什么时候应该使用它。

3820
来自专栏听Allen瞎扯淡

一起 Static 和 Synchronized 引发的血案

这两天在定位一个网上问题的时候发现一个很诡异的现象,系统夜间的汇总任务跑了很长一段时间才能结束,而且日志显示这些汇总任务的每个子任务都很快就结束了,但整体任务还...

6562
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令六

以后这个系列的每次就浓缩一下只推送一个命令~ ? sort sort命令是帮我们依据不同的数据类型进行排序,在Linux里非常常用的一个命令 sort命令使用...

3606
来自专栏Java爬坑系列

【Java入门提高篇】Day11 Java代理——JDK动态代理

  今天来看看Java的另一种代理方式——JDK动态代理   我们之前所介绍的代理方式叫静态代理,也就是静态的生成代理对象,而动态代理则是在运行时创建代理对象。...

2097

扫码关注云+社区

领取腾讯云代金券