3.AngularJS-过滤器

转自:https://www.cnblogs.com/best/p/6225621.html

二、过滤器

使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量。语法格式如下:

{{ express | filter:parameter1:p2:p3… | … | …}}

过滤器分了内置过滤器与自定义过滤器,过滤器的调用方式也分了在模板中调用与在函数中调用。

2.1、内置过滤器

常见的内置过滤器有:

1)、currency(货币)

{{123.456 | currency:'¥'}}

2)、number(数字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小写)格式化

{{"Hello"| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

5)、limitTo(截取)格式化,数量限制
{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'yyyy': 4位数字的年份(如AD 1 => 0001, AD 2010 => 2010) 
'yy': 2位数字的年份,范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10) 
'y': 1位数字的年份,例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12) 
'dd': 日,范围为(01-31) 
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat) 
'HH': 小时, 范围为(00-23)
'H': 小时 (0-23) 
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12) 
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59) 
'ss': 秒, 范围为 (00-59) 
's': 秒 (0-59) 
'.sss' or ',sss': 毫秒,范围为 (000-999) 
'a': am/pm 标记 
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200) 
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)

format 字符串也可以是以下预定义的本地化格式之一:
'medium': 等于en_US本地化后的 'MMM d, y h:mm:ss a' (如:Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如: 9/3/10 12:05 pm) 
'fullDate': 等于en_US本地化后的 'EEEE, MMMM d, y' (如: Friday, September 3, 2010) 
'longDate': 等于en_US本地化后的 'MMMM d, y' (如: September 3, 2010) 
'mediumDate': 等于en_US本地化后的 'MMM d, y' (如: Sep 3, 2010) 
'shortDate': 等于en_US本地化后的 'M/d/yy' (如: 9/3/10) 
'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如: 12:05:08 pm) 
'shortTime': 等于en_US本地化后的 'h:mm a' (如: 12:05 pm)
format 字符串可以包含固定值。这需要用单引号括起来 (如: "h 'in the morning'")。如果要输出单引号,使序列中使用两个单引号(如: "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

{{name | filter : 'l' | json}}

2.1.1、在模板中使用过滤器

示例代码:

复制代码
<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01"><head><meta charset="UTF-8"><title>过滤器</title></head><body><!--指定控制器的作用范围--><form ng-controller="Controller1" name="form1"><p>货币:{{money}} ,{{money|currency}} ,{{money|currency:"¥"}}</p><p>数字:{{money|number:1}} ,{{money | number:1 | currency:"$" }}</p><p>大写:{{message|uppercase}}</p><p>小写:{{message|lowercase}}</p><p>json:{{user | json}}</p><p>截取:{{message|limitTo:5|uppercase}}</p><p>日期1:{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}</p><p>日期2:{{birthday|date:'fullDate'}}</p><p>排序:{{users|orderBy:'age':true}}</p></form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定义模块,指定依赖项为空var app01 = angular.module("app01", []);//定义控制器,指定控制器的名称,$scope是全局对象app01.controller("Controller1", function($scope) {$scope.money=1985.678;$scope.message="Hello AngularJS!"$scope.user={name:"rose",age:18};$scope.birthday=new Date();$scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];});</script></body></html>
复制代码

运行结果:

2.1.2、在脚本中调用过滤函数

在函数中调用过滤器的方法是:在控制中添加对filter的依赖,filter("过滤函数名称")(被过滤对象,'参数')

示例代码:

复制代码
<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01"><head><meta charset="UTF-8"><title>过滤器</title></head><body><!--指定控制器的作用范围--><form ng-controller="Controller1" name="form1">{{money}}<hr/>{{moneyString}}</form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定义模块,指定依赖项为空var app01 = angular.module("app01", []);//定义控制器,指定控制器的名称,$scope是全局对象app01.controller("Controller1", function($scope,$filter) {$scope.money=1985.897;//使用$filter服务查找currency函数,并调用$scope.moneyString=$filter("currency")($scope.money,'USD$');});</script></body></html>
复制代码

运行结果:

2.2、自定义过滤器

示例代码:

复制代码
<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01"><head><meta charset="UTF-8"><title>过滤器</title></head><body><!--指定控制器的作用范围--><form ng-controller="Controller1" name="form1"><p>{{"Hello AngularJS and NodeJS" | cutString:15:'...'}}</p><p>{{longString}}</p></form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定义模块,指定依赖项为空var app01 = angular.module("app01", []);//向模块中添加过滤//用于裁剪字符,超过长度则截取,添加...app01.filter("cutString",function(){return function(srcString,length,addString){if(srcString.length<length){return srcString;}return srcString.substring(0,length)+addString;}});//定义控制器,指定控制器的名称,$scope是全局对象app01.controller("Controller1", function($scope,$filter) {$scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");});</script></body></html>
复制代码

运行结果:

转载于:https://www.cnblogs.com/sharpest/p/8126714.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webstorm卡顿问题

解决webstorm卡顿问题 webstorm强大的功能就不多做介绍了。但是它的缺点也显而易见&#xff1a;吃内存。 电脑配置稍低一点&#xff0c;运行webstorm就特别容易卡顿&#xff0c;特别是项目比较大的时候&#xff0c;那卡顿得不要不要的。 在我的笔记本8g内存 256ssd的配置下&…

cmd.exe启动参数说明

启动命令解释程序 Cmd.exe 的新范例。如果在不含参数的情况下使用&#xff0c;cmd 将显示操作系统的版本和版权信息。 语法 cmd [{/c | /k}] [/s] [/q] [/d] [{/a | /u}] [/t:FG] [/e:{on | off}] [/f:{on | off}] [/v:{on | off}] [String] 参数 /c 执行 String 指定的命令&am…

【深度学习】——训练过程

包含哪些层 训练过程 其实就是yf(x)的求参过程&#xff0c;先给参数一个初始值&#xff0c;然后根据初始函数计算得到预测值&#xff0c;根据预测值和真值计算损失&#xff0c;然后又根据损失函数进行反向传播更新参数&#xff0c;更新参数后&#xff0c;再次计算预测值&#…

ABB RAPID 程序 WorldZone 归纳

在 RAPID 程序中&#xff0c;静态的 WorldZone 不能被解除并再次激活&#xff0c;或者进行擦除。在 RAPID 程序中&#xff0c; 临时的 WorldZone 可以被解除&#xff08;WZDisable&#xff09; &#xff0c; 再次激活&#xff08;WZEnable&#xff09; 或者擦除&#xff08;WZF…

thinkphp自定义模板标签(一)

thinkphp内置的foreach和include等模板标签使用是非常方便的&#xff1b;但是内置的那些标签只能满足常用功能&#xff0c;个性化的功能就需要我们自己编写自定义模板标签了&#xff1b;下面就是要讲解如何实现&#xff1b; 示例环境&#xff1a;thinkphp3.2.3 thinkphp的模板标…

【深度学习】——激活函数(sigmoid、tanh、relu、softmax)

目录 激活函数 1、作用 2、常用激活函数 3、衡量激活函数好坏的标准&#xff1a; 4、不同的激活函数 1&#xff09;sigmoid 2&#xff09;tanh函数 3&#xff09;RULE函数和leak-relu函数 4&#xff09;softmax函数 激活函数 1、作用 如果只是线性卷积的话&#xff0c…

SDUT 3377 数据结构实验之查找五:平方之哈希表

数据结构实验之查找五&#xff1a;平方之哈希表 Time Limit: 400MS Memory Limit: 65536KBSubmit StatisticProblem Description 给定的一组无重复数据的正整数&#xff0c;根据给定的哈希函数建立其对应hash表&#xff0c;哈希函数是H(Key)Key%P&#xff0c;P是哈希表表长&…

我的2017年前端之路总结

原文首发于我的博客 年末了&#xff0c;赶着刚考完两门考试&#xff0c;在最后4门考试来临之前抽空写一下今年的小结。 今年格外忙。忙完本科毕设&#xff0c;又马上投入了研究生实验室的搬砖生涯。跟去年一样&#xff0c;列个今年的学习成果清单&#xff1a; 过去的一年 技术成…

对软件工程的疑问

在大学时光中学习了算法编程后&#xff0c;我发现我对于源程序理解很差&#xff0c;我只会很低程度的写代码&#xff0c;但是基本描述不出来。所以我的编程很差&#xff0c;而且由于我很少打代码&#xff0c;所以我的编程能力基本没有多少提高&#xff0c;我也没有发现该学什么…

【深度学习】——分类损失函数、回归损失函数、交叉熵损失函数、均方差损失函数、损失函数曲线、

目录 代码 回归问题的损失函数 分类问题的损失函数 1、 0-1损失 (zero-one loss) 2、Logistic loss 3、Hinge loss 4、指数损失(Exponential loss) 机器学习的损失函数 Cross Entropy Loss Function&#xff08;交叉熵损失函数&#xff09; 交叉熵优点 Mean Squared E…

伺服电机惯量问题

在伺服系统选型及调试中&#xff0c;常会碰到惯量问题。 其具体表现为&#xff1a;在伺服系统选型时&#xff0c;除考虑电机的扭矩和额定速度等等因素外&#xff0c;我们还需要先计算得知机械系统换算到电机轴的惯量&#xff0c;再根据机械的实际动作要求及加工件质量要求来…

【转】应用架构一团糟?如何将单体应用改造为微服务

概述 将单体应用改造为微服务实际上是应用现代化的过程&#xff0c;这是开发者们在过去十年来一直在做的事情&#xff0c;所以已经有一些可以复用的经验。 全部重写是绝对不能用的策略&#xff0c;除非你要集中精力从头构建一个基于微服务的应用。虽然听起来很有吸引力&#xf…

Linux 解决ssh连接慢的问题

备份文件 cp /etc/ssh/sshd_config /etc/ssh/sshd_config.bak 编辑文件 vi /etc/ssh/sshd_config 输入/ 查找GSSAPIAuthentication 设置如下 GSSAPIAuthentication no # 是否允许使用基于 GSSAPI 的用户认证。默认值为"no"。仅用于SSH-2 详细解释 输入/ 查找UseDNS …

ABB机器人与PC计算机控制口连接 超级终端 命令清单

条件&#xff1a; 9 针串口通信 RS232。 PC 启动超级终端软件。Windows -> Start -> Accessories -> Terminal 通信设置&#xff1a; 1. 波特率 9600 8 位2. 1 个停止位 没有奇偶校验3. 没有 Modern 采用直接串口连接4. 使用 Xon/Xoff 通信形式当故障发生时&#xff0…

【Hibernate】Hibernate系列6之HQL查询

HQL查询 6.1、概述 6.2、分页查询 6.3、命名查询 6.4、投影查询-部分字段查询 6.5、报表查询 6.6、迫切左外连接、左外连接 6.7、迫切内连接、内连接 6.8、QBC查询、本地查询 转载于:https://www.cnblogs.com/junneyang/p/5254641.html

【深度学习】——梯度下降优化算法(批量梯度下降、随机梯度下降、小批量梯度下降、Momentum、Adam)

目录 梯度 梯度下降 常用的梯度下降算法&#xff08;BGD&#xff0c;SGD&#xff0c;MBGD&#xff09; 梯度下降的详细算法 算法过程 批量梯度下降法&#xff08;Batch Gradient Descent&#xff09; 随机梯度下降法&#xff08;Stochastic Gradient Descent&#xff09…

Javascript隐式转换

乱想 javascript为什么需要隐式转换&#xff1f;如果没有会出现什么情况&#xff1f; 找了一圈没有看到关于这个的讨论&#xff0c;只好自己研究了&#xff0c;可能不一定正确&#xff0c;自行辨知。 郁闷就是郁闷在好好的&#xff0c;为什么要搞个隐式转换&#xff0c;一般来讲…

双工位机器人 焊接夹具注意事项 o(╯□╰)o

焊接夹具设计注意事项 一套完美的夹具,需要机械设计人员正确的设计思想&#xff0c;良好的配件质量&#xff0c;钳工负责认真的装配质量,卡具在使用中不断的修磨和改进&#xff0c;才会达到好的效果。 本人非机械设计&#xff0c;只是在使用焊接卡具过程中遇到了很多卡具设计上…

【公共类库】加密解密

public static class MyEncryption{#region Md5加密/// <summary>/// 使用MD5加密/// </summary>/// <param name"str">需要加密的数据。</param>/// <param name"kind">加密类型&#xff1a;1-普通加密&#xff1b;2-密码加…

使用JOTM实现分布式事务管理(多数据源)

使用spring和hibernate可以很方便的实现一个数据源的事务管理,但是如果需要同时对多个数据源进行事务控制,并且不想使用重量级容器提供的机制的话,可以使用JOTM达到目的. JOTM的配置十分简单,spring已经内置了对JOTM的支持,一.<bean id"jotm" class"org.spri…