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 ...
随机推荐
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- Java从零开始学三十三(JAVA IO- File类)
一.简述 在整个io包中,唯一表示与文件本身有关的类就是File类.使用File类可以进行创建或删除文件等常用操作.要想使用File类,则首先要观察File类的构造方法,此类的常用构造方法如下所示: ...
- 【Maven】IKAnalyzer 在Maven Repository不存在
1.在mvnrepository里面找IKAnalyzer,这个中文分词包,一直没有找到,找到github,发现是一个国人写的. http://mvnrepository.com/search?q=I ...
- 算法笔记_207:第五届蓝桥杯软件类决赛部分真题(Java语言C组)
目录 1 数字拆分 2 稍大的串 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 数字拆分 正整数可以表示为若干正整数的累加和. 如,对于正整数n=6,可以分划为: 6 5+1 4+2 4+1+ ...
- Android——SD卡工具类——SDCardUtils.java
package com.xdsjs.save.utils; /** * SD卡相关的辅助类 * Created by xdsjs on 2015/10/13. */ import java.io.Fi ...
- spring启动方式
spring有三种启动方式,使用ContextLoaderServlet,ContextLoaderListener和ContextLoaderPlugIn.看一下ContextLoaderListe ...
- jquery 保留两个小数的方法
$()); 直接使用:toFixed(2)
- 【Android开发经验】Cannot generate texture from bitmap异常的解决方式
异常现象: 今天在处理用户头像的过程中,由于头像的处理比較复杂,由于,没有使用afinal自带的自己主动载入.而是自己依据头像的下载路径.手动进行下载和使用.可是在手动回收bitmap对象的过程中,会 ...
- 【实践】源代码分析工具Doxygen+Graphviz
拿到一个新项目或者一个开源框架,看源代码的方式不是先进行单步调试!最好的方式是先画出整个项目或者开源框架的类.协作.已经方法调用图,能够帮助你更快的理解框架或者项目的设计. 打包下载地址:http:/ ...
- 基于cancel的不全然恢复
实验:基于cancel的不全然恢复 实验环境查看 lsnrctl status select open_mode from v$database; --监听与数据库状态 show paramete ...