本篇主要介绍过滤器的基本用法:

过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作:

{{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)的更多相关文章

  1. angular学习笔记(十六) -- 过滤器(2)

    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...

  2. python3.4学习笔记(十六) windows下面安装easy_install和pip教程

    python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...

  3. (C/C++学习笔记) 十六. 预处理

    十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...

  4. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  5. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  6. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  7. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  8. python 学习笔记十六 django深入学习一 路由系统，模板，admin，数据库操作

    django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...

  9. angular学习笔记(十四)-$watch(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

随机推荐

  1. 知识共享图文直播---（一）将数据库中的数据加载到MSFlexGrid空间中再导入Excel

    熟话说万物皆有其存在的道理,为什么我突然想写<知识共享图文直播>这个系列呢?首先,我想的是记录自己学习的历程,在记录中加深自己对知识的理解,同时也希望自己的博文能帮助到其他数据库的初学者. ...

  2. 服务名无效。请键入 NET HELPMSG 2185 以获得更多的帮助。

    1:关闭MySQL服务的时候出现“服务名无效.请键入 NET HELPMSG 2185 以获得更多的帮助.”错误. 2:查看服务名称 3:重新关闭服务 4:管理员运行控制台后重新执行 成功停掉了.

  3. vim中的高亮全部同样单词的方法

    用vim时,想高亮显示一个单词并查找的方发.将光标移动到所找单词. 1: shift + "*"  向下查找并高亮显示 2: shift + "#"  向上查找 ...

  4. 〖Android〗酷派手机固件.cpb文件的分解程序

    /* * ===================================================================================== * * Filen ...

  5. 【FAI】七日年化收益与万份收益的理解

    七日年化收益:其实指的一年的收益(应该忽略”七日”),这里的七日指的是取最近七日年化的结果 万份收益:每万元每天的收益 可以使用下图来清晰识别: 例子: 10000元按照5%的七日年化收益计算的话: ...

  6. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. iOS-启动动态页跳过设计思路

    概述 根据UIBezierPath和CAShapeLayer自定义倒计时进度条,适用于app启动的时候设置一个倒计时关闭启动页面.可以设置进度条颜色,填充颜色,进度条宽度以及点击事件等. 详细 代码下 ...

  8. AsyncTask 异步任务基本使用-下载视频

    概述 android 提供了一个异步任务类AsyncTask,使创建异步任务.更新UI变得更加简单,不再需要编写任务线程和Handler实例即可完成相同的任务.本例子将演示并实现,使用AsyncTas ...

  9. 开源APP 源码

    作者:wjh2005链接:http://www.zhihu.com/question/28518265/answer/88750562来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. Cod ...

  10. MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解

    本文转自:http://blog.csdn.net/loongshawn/article/details/50496460 1. Mybatis JdbcType与Oracle.MySql数据类型对应 ...