angularJS过滤器

filter

currency

date

filter

json

limitTo

lowercase

number

orderBy

uppercase

......

Filter过滤器

过滤器的主要用途就是一个格式化 / 筛选数据的小工具;

一般用于服务端存储的数据转换为用户界面可以理解的数据;

常见需要使用Filter的数据有:

- 时间 1288323623006

currency:它是用来过滤货币
作用把数字过滤成 一个货币:
使用:竖杠+过滤器名称
<div ng-app=>
<h1>{{20000 | currency}}</h1>
</div>
//效果:$20,000.00

没有多少意义,国际标准货币,对我们不实用;

date :转化为时间

<div ng-app=>
<h1>{{1288323623006 | date}}</h1>//效果 Oct 29, 2010
<h1>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</h1>//效果 2010-10-29 11:40:23
// 这里是英文的
可以使用 angular-locale_zh-cn.js 来进行汉化
</div>

json过滤器

<div ng-app="myApp" ng-controller="myAppController">
{{jsonDate}}<br>
{{jsonDate | json}}
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.jsonDate = {
zifuchuan:'张三',
shuzi:19,
bool:false,
json:{name:'老王',age:18},
shuzu:[{name:'老王',age:'18'},{name:'老王',age:'18'}]
};
}]);
</script>

limitTo过滤器:限制到:

作用:用来控制字符串展示多少长度;

<div ng-app>{{'www.baidu.com,baidu.com' | limitTo:10}}</div>
//www.baidu.

具体语法:

{{limiTo_expression | limitTo:limit:begin}}

limit是必选项,begin是可选项;

number过滤器: 格式化(保留小数)这里会进行四舍五入

<div ng-app>{{1459824.1542558 | number:2}}</div>
// 效果:1,459,824.15

接下来的过滤器,在使用过程中在做阐述;

angularJS的过滤器!的更多相关文章

  1. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  2. AngularJS开发指南13:AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  3. 走进AngularJs(七) 过滤器(filter) - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  4. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  5. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. AngularJS:过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  9. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

随机推荐

  1. 聊聊Javascript中的AOP编程

    Duck punch 我们先不谈AOP编程,先从duck punch编程谈起. 如果你去wikipedia中查找duck punch,你查阅到的应该是monkey patch这个词条.根据解释,Mon ...

  2. tensorflow中slim模块api介绍

    tensorflow中slim模块api介绍 翻译 2017年08月29日 20:13:35   http://blog.csdn.net/guvcolie/article/details/77686 ...

  3. am335x phy led problem

    问题描述 连接网线的情况下,每次进行软件"reboot",网口的LINK LED能够正常的熄灭,而ACTIVE LED却是亮的. reboot重启之后,LINK的灯正常变亮,而AC ...

  4. (转)分析kernel的initcall函数

      分析kernel的initcall函数   来源: ChinaUnix博客 日期: 2008.07.19 21:24 (共有条评论) 我要评论   分析kernel的initcall函数Autho ...

  5. par函数cex参数-控制文字和点的大小

    cex参数用来控制图片中点和文字的大小,对于一副图片来说,有很多的文字部分,包括x轴标签(xlab), y轴标签(ylab), x轴刻度上的文字, y轴刻度上的文字,主标题(main), 副标题(su ...

  6. window设置TortoiseGit连接git不用每次输入用户名和密码

    1. 在Windows中添加一个HOME环境变量,值为%USERPROFILE%,如下图: 2. 在“开始>运行(快捷键:win+r)”中打开%Home%,然后在目录下新建一个名为“_netrc ...

  7. Spring-DispatcherServlet说明

    使用spring MVC,配置DispatcherServlet是第一步. DispatcherServlet是一个Servlet,所以可以配置多个DispatcherServlet. Dispatc ...

  8. 阿里云ACE下的PHP开发环境搭建

    阿里云ACE下的PHP开发环境搭建 本系列文章由ex_net(张建波)编写.转载请注明出处. http://blog.csdn.net/ex_net/article/details/23999053 ...

  9. DWORD类型

    INT 代表int,DWORD 代表 unsigned longint会随着机器位数的不同而发生变化,比如在16位机上为16为,在32位机上为32位,在64位机上为64位.看看最原始的定义就知道了. ...

  10. 记录下自己常用的全框架HTML代码

    纯粹记录下,没有任何意义. 也不推荐使用 <frameset rows="> <frame src=" name="topFrame" scr ...