Angular过滤器
来源:互联网 发布:淘宝热线电话 编辑:程序博客网 时间:2024/05/21 17:13
过滤器(filter)作用就是接收一个参数,通过某个规则函数进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的json对象,对数组中的元素进行排序等。angular有内置的过滤器,如:currency(货币)、date(日期)、filter(子符串匹配)、json(格式化json对象)、limitTo(限制个数)、uppercase(大写)、lowercase(小写)、number(数字)、orderBy(排序)。除此之外还可以自定义过滤器,可以满足任何要求的数据处理。以下简单介绍过滤器的使用方法
过滤器在商品的筛选过程中使用的很多,比如淘宝的商品筛选、购物车等等
1货币过滤器currency
原始数据输出为12;
货币过滤器1输出为
则货币过滤器3输出为$123.123;
( “ | ” 为格式化符号 )
原始输出数据的方式:<span ng-bind="price">货币过滤器输出1:<span ng-bind="price | currency"></span>长度:<input type="text" ng-model="length"><br /> 位置:<input type="text" ng-model="index"> <br /> <ul> <li ng-repeat="u in users | limitTo:length:index"> <span ng-bind="u.userID"></span>**** <span ng-bind="u.username"></span>**** <span ng-bind="u.nickname"></span> </li> </ul>货币过滤器输出2:<span ng-bind="price | currency:'人民币¥'"></span>设置符号货币过滤器输出3:<span ng-bind="price | currency:'¥':3"></span>可设置小数点后保留几位$scope.price=12
2日期时间过滤器date
原始输出:”2017-04-29T13:08:23.027Z”
日期格式化:Apr 29, 2017
日期格式化:通常情况下,需要按照用户的要求进行输出,这时候就会附带参数 y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
2017年04月29日 09:08:23
2017年04月29日
09:08:23
<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><span ng-bind="date | date:'yyyy年MM月dd日'"></span><span ng-bind="date | date:'hh:mm:ss'"></span>
3.过滤输出
关键词:
1—cat—tom—(过滤出来的)
输入关键词:<input type="text" ng-model="keyword"><ul> <li ng-repeat="u in users | filter:keyword"> <span ng-bind="u.userID"></span>--- <span ng-bind="u.username"></span>--- <span ng-bind="u.nickname"></span> </li></ul>
4.JSON过滤器(把数据中的对象,转换成JSON字符串的格式输出展示到页面上
经常能用于代码程序调试)
可将数组中的json对象以字符串的形式输出
<span ng-bind="users|json"></span>
5.长度限制过滤器
长度:
截取长度
位置:
从哪个位置开始
1—cat—tom
2—mouse—jerry (过滤出来的)
长度:<input type="text" ng-model="length">位置:<input type="text" ng-model="index"> <ul> <li ng-repeat="u in users | limitTo:length:index"> <span ng-bind="u.userID"></span>--- <span ng-bind="u.username"></span>--- <span ng-bind="u.nickname"></span> </li> </ul>
6.字符串大小写转换过滤器
John Smith
JOHN SMITH
john smith
<div ng-bind="name"></div><div ng-bind="name | uppercase"></div><div ng-bind="name | lowercase"></div>
7.排序输出
排序关键词:
排序顺序:倒序
2—mouse—jerry (过滤出来的)
排序关键词:<input type="text" ng-model="keyword">排序顺序:<input type="checkbox" ng-model="sort">倒序 <ul> <li ng-repeat="u in users | orderBy:keyword:sort"> <span ng-bind="u.userID"></span>--- <span ng-bind="u.username"></span>--- <span ng-bind="u.nickname"></span> </li> </ul>
- angular过滤器
- angular过滤器
- Angular过滤器
- Angular过滤器
- angular过滤器
- Angular过滤器
- angular过滤器
- angular 过滤器
- angular过滤器
- Angular过滤器
- angular过滤器
- angular过滤器、自定义过滤器
- angular自定义过滤器
- angular过滤器二
- angular过滤器三
- angular js过滤器
- Angular之解读过滤器
- angular 常用过滤器
- 编写java程序151条建议读书笔记(5)
- 入职第一天打造完美的开发环境
- 设计模式——装饰模式
- Mysql学习笔记十六——视图
- 大型网站架构演化发展历程
- Angular过滤器
- 进程内核栈
- easyui实现datagrid打印
- Java定时任务
- Cookie Session 以及它们的区别
- Java面试准备二十:Java异常处理和设计
- Mysql学习笔记十七——表、视图的管理语句
- [Python笔记]1.python及Python库安装(windows)
- SOA