angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法:
过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作:
{{expression | filter1:,参数1,参数... | filter2: 参数1,参数2... }}
expression : 表达式,也就是还没有经过过滤的变量值,相当于普通的 {{}}里面的内容
filter1 : 过滤器的名字,可以是angular内置的过滤器,也可以自定义过滤器(在下一篇里讲解)
参数1,参数2,... : 需要被传递给过滤器函数的参数,可以有多个
过滤器可以通过 "|" 进行多次过滤
下面来看一些angular内置的过滤器的基本用法:
<!DOCTYPE html>
<html ng-app>
<head>
<title>13.1过滤器</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="filter">
<span>{{num | number:2 }}</span>
<br>
<span>{{num | number:0 }}</span>
<br>
<span>{{num | number:0 | currency }}</span>
<br>
<span>{{num | currency }}</span>
<br>
<span>{{day | date }}</span>
<br>
<span>{{word | uppercase}}</span>
</div>
</body>
</html>
function filter($scope){
$scope.word = 'code_bunny';
$scope.day = 1302375948026;
$scope.num = 12.956;
}
1.{{num | currency }}
currency: 把数字过滤成美元,四舍五入格式化成小数点后两位.
2. {{num | number:0 }}
number: 格式化数字,后面的参数表示格式化时保留小数点后面的个数,0就是不保留小数,1就是取一位,四舍五入
3. {{num | number:0 | currency }}
number | currency : 先格式化数字,再格式化成美元
4. {{word | uppercase}}
uppercase : 将单词的小写转为大写
这里只是举例,还有很多内置的angular过滤器.详细可以看手册
--------------------------------------------------------------------------------------------------------
遗留问题:
1.currency过滤器如果不要格式化到小数点后面2位的话,不知道怎么处理,现在即使给一个没有小数的整数,比如12,它也会格式化为$12.00
angular学习笔记(十六) -- 过滤器(1)的更多相关文章
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- python3.4学习笔记(十六) windows下面安装easy_install和pip教程
python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...
- (C/C++学习笔记) 十六. 预处理
十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- python 学习笔记十六 django深入学习一 路由系统,模板,admin,数据库操作
django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
随机推荐
- 10个最受欢迎的Java类(转)
原文:http://www.csdn.net/article/2012-06-04/2806277 每一个Java程序员都有一份属于自己的Java类排名表.这个排名表没有严格的规定,也没有可遵循的规则 ...
- Oracle体系结构四(学习笔记)
- MySQL中int(5) 中的5代表什么意思?
对于INT型,MySQL支持指定显示宽度例如:int(5):表示如果数值宽度小于5位,则填满宽度,保证总宽度为5位.默认为int(11),配合zerofill可以看到效果. DROP TABLE IF ...
- 1z0-052 q209_10
10: A user, who is authenticated externally, logs in to a remote machine and connects to the databas ...
- 关于SimHash去重原理的理解(能力工场小马哥)
阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...
- exception 值太大
CreateTime--2018年2月5日09:45:01 Author:Marydon 异常: Cause: java.sql.SQLException: ORA-12899: 列 " ...
- eclipse 关闭web项目无用校验
eclipse 关闭web项目无用校验 CreateTime--2018年4月8日16:21:01 Author:Marydon 1.关闭javascript校验 1.1 切换到视图Navigat ...
- UsageLog4j
迁移时间:2017年5月21日09:42:46CreateTime--2017年1月2日09:35:55Author:Marydon原文链接:http://www.360doc.com/conte ...
- AIX查看系统安装时间和运行时长
$ lslpp -h bos.mp* --AIX系统的安装时间,可以通过bos.mp和bos.mp64文件集的安装时间得知 Fileset Level Action Status Date Time ...
- Fiddler 中请求时间的显示列
在Tool bar上面找到 Rules->CustomRules 在class Handlers{ 里面添加 //----------------------------显示请求时间,显示毫 ...