angularJS的过滤器!
angularJS过滤器:
filter
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
......
Filter过滤器:
过滤器的主要用途就是一个格式化 / 筛选数据的小工具;
一般用于服务端存储的数据转换为用户界面可以理解的数据;
常见需要使用Filter的数据有:
- 时间 1288323623006
<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的过滤器!的更多相关文章
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- AngularJS开发指南13:AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区 原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
- AngularJs(八) 过滤器filter创建
大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...
- 创建 AngularJS 自定义过滤器,带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- AngularJS之过滤器
AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...
- AngularJS:过滤器
ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...
- AngularJS 五 过滤器及验证
AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number Filter ...
随机推荐
- HTTP协议详解(文档)
目录引言................................................................................................ ...
- 关于datatable导出execl
导出主要考虑响应流的问题 curContext.Response.ContentType = "application/vnd.ms-excel"; curContext.Resp ...
- addClass和removeClass函数
function addClass1(element,value){ if(!element.className){ element.className = value; }else{ newClas ...
- C++ Primer学习笔记(三) C++中函数是一种类型!!!
C++中函数是一种类型!C++中函数是一种类型!C++中函数是一种类型! 函数名就是变量!函数名就是变量!函数名就是变量! (---20160618最新消息,函数名不是变量名...囧) (---201 ...
- MVC演化 (转至http://www.cnblogs.com/wubaiqing/archive/2011/10/26/2225438.html)
MVC已经成为我们最常误用的模式,人们之所以常常误用MVC,很大程度上是因为混淆了不同的MVC变体. Classic MVC Classic MVC 大概上世纪七十年代,Xerox PARC的Tryg ...
- 【Java面试题】31 介绍Collection框架的结构
Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection 是单列集合 List 元素是有序的.可重复 有序的 colle ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...
- 扒一扒MathType不为人知的技巧
MathType作为一款编辑数学公式的神器,很多人在使用它时只是很简单地使用了一些最基本的模板,很多功能都没有使用.MathType功能比你想象中的大很多,今天我们就来扒一扒MathType那些不为人 ...
- VC++ : VS2008 使用ATL开发COM组件
新建ATL Project,工程名命名为MyAtlCom: 出现工程 向导,一路“Next”: Add class,点击添加 ATL Simple Object , 类名CStatistic, 接口I ...
- Leetcode: Best Time to Buy and Sell Stock I, II
思路: 1. 算法导论讲 divide and conquer 时, 讲到过这个例子. 书中的做法是先让 price 数组减去一个值, 然后求解最大连续子数组的和. 分治算法的复杂度为 o(nlogn ...