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,一经查实,立即删除!

相关文章

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

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

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…

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

目录 代码 回归问题的损失函数 分类问题的损失函数 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;这是开发者们在过去十年来一直在做的事情&#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 …

【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…

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

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

【机器学习】——《机器学习实战》面试复习

目录 一、机器学习概念 二、机器学习步骤 三、有监督学习 1、k-近邻算法 核心思想 实例&#xff1a;手写数字的识别 优缺点&#xff1a; 2、决策树 相关概念 核心思想 一些小技巧 优缺点 3、神经网络 4、SVM——支持向量机 核心思想 SVM和SVR的区别 ​ 优缺点…

ubuntu安装LDAP

参考文献&#xff1a; https://help.ubuntu.com/12.04/serverguide/openldap-server.html&#xff08;最主要的&#xff09; http://www.linuxidc.com/Linux/2011-08/40020.htm http://blog.chinaunix.net/uid-24276740-id-3360306.html 前言 在网上搜索ldap的安装配置&#xf…

ABB机器人之LOADDATA

ABB机器人之LOADDATA loaddata是用来描述连接到机器人机械接口的负载&#xff08;机器人的安装法兰&#xff09;。loaddata数据通常定义有效载荷或负荷&#xff08;通过指令gripload设置机器人抓手负载 或mechunitload指令设置变位机负载。loaddata通常也作为tooldata的一部分&…

【深度学习】——性能指标(ROC、MAP、AUC等)

目录 一、分类任务性能指标 1、混淆矩阵 2、精确度ACCURACY 正确数/总数 3、查全率&#xff08;RECALL&#xff09;——真正正样本中预测正确的比例 4、查准率&#xff08;precision&#xff09;——预测为正样本中的预测正确的比例 5、F-score——对查准率和查全率进行结…

【深度学习】——过拟合的处理方法

目录 一、什么是过拟合&#xff1f;&#xff08;overfitting&#xff09; 二、过拟合的表现&#xff08;判定方法&#xff09; 训练集、测试集、验证集区别 测试集与验证集的区别 三、产生过拟合的原因 1、样本方面 2、模型方面 四、避免过拟合的方法 1、样本方面 1&…

ASP.NET页面的字符编码设置

在用ASP.NET写网上支付的接口程序时&#xff0c;遇到一个奇怪问题&#xff0c;通过表单提交过去的中文全是乱码&#xff0c;英文正常。而用asp程序进行测试&#xff0c;可以正常提交中文&#xff0c;asp页面中有这样的HTML代码&#xff1a; <meta http-equiv"Content-T…

【深度学习】——BN层(batch normalization)

目录 一、“Internal Covariate Shift”问题 二、BatchNorm的本质思想 两个参数r和β的意义——精髓所在 三、训练阶段如何做BatchNorm 四、BatchNorm的推理(Inference)过程 五、BatchNorm的好处 一般使用在卷积层后、激活层前 Batch Normalization作为最近一年来DL的重要…

JAXB vs XStream

2019独角兽企业重金招聘Python工程师标准>>> JAXB vs XStream 博客分类&#xff1a; java JAXB vs XStream 这两东东本质上是有差别的&#xff0c;JAXB称为OX binding工具&#xff0c;XStream应该算序列化工具&#xff0c;但OX binding工具也会marshall和unmarsha…

ABB 机器人 DRVIO_1通信报警

ABB 机器人DRVIO_1通信报警 2014.06.13 ABB1600弧焊机器人&#xff0c;从A地搬运到B地&#xff0c;到达B地后&#xff0c;机器人上电&#xff0c;报DRVIO_1通信故障&#xff0c;机器人进入故障停止模式。 DRVIO_1为LOCAL_GENERIC类型的ABB内部LOCAL总线类型的单元实例。 故障…

S2SH CRUD 整合

S2SH CRUD 整合 采用的框架 Struts2Spring4Hbiernate4. 目录结构 &#xff1a; EmployeeAction: 1 package com.xx.ssh.actions;2 3 import java.io.ByteArrayInputStream;4 import java.io.InputStream;5 import java.io.UnsupportedEncodingException;6 import java.util.…

ABB 机器人 添加多任务

首先&#xff0c;需要启用多任务选项的控制器。 要做到这一点&#xff0c;创建一个新的机器人控制器RobotStudio站 - >选择机器人&#xff08;控制器菜单&#xff09; - >.................. - >系统生成器 - >选择控制器 - >修改...下一页 - >下一步 - >…