小人儿的笔记(AngularJS)--04
来源:互联网 发布:好的哲学书籍推荐知乎 编辑:程序博客网 时间:2024/06/16 15:32
过滤器
1.用于将数据格式化后展现;
2.AngularJS内置多个过滤器,并支持自定义;
3.可以用在视图模板(templates)、指令(directives)、控制器(controllers)或者服务(services)中;
4.在视图模板或指令中使用运算符“|”添加过滤器;
5.在控制器或服务中使用$filter;
Angular共内置了9种过滤器,分别是
- 货币currency :
- 用于以货币形式显示数据,默认以$为货币符号,保留小数点后2位, 可以指定货币符号和保留位数,参数顺序不能颠倒,自动四舍五入;
如:{{num | currency:'¥':3}}
- 用于以货币形式显示数据,默认以$为货币符号,保留小数点后2位, 可以指定货币符号和保留位数,参数顺序不能颠倒,自动四舍五入;
- 数字number :
- 用于保留小数位数,自动四舍五入;
- 日期date:
- Date类型数据默认输出为与基准时间相差毫秒数
- 预定义格式:short、medium、shortDate、 mediumDate(默认格式)、longDate、fullDate、shortTime、mediumTime
- 自定义格式:使用字母y、M、d、h/H、m、s、E等自由组合
如:<h1>{{now | date:"yyyy-MM-dd HH:mm:ss"}}</h1>
字符串大小写lowercase和uppercase
个数限制limitTo
- 用于截取部分字符串或数组,参数为正数表示截取开始部分,负数表示截取结尾部分;当参数超出数据长度,则返回原始数据;
- 当有两个参数时,第一个代表截取的长度,第二个代表索引;
如:
<h1>limitTo:2:3 :{{str | limitTo:5:3}}</h1> <h1>limitTo:-2:-3 :{{str | limitTo:-5:-3}}</h1>
- JSON格式化json
- 用于将JSON对象或JavaScript对象转换为JSON格式字符串;
- 数据筛选filter
- 数据排序orderBy
过滤器在视图层的用法
{{表达式 | 过滤器1名称 : 参数a:参数b | 过滤器2名称 : 参数c : 参数d | … }}
<!--特别要注意过滤器的顺序!--><h1>{{123.3445 | number:3 | currency:'¥'}}</h1><!--123.35--><h1>{{123.3445 | currency:'¥':3 | number :2}}</h1><!--代码出错,已经不再是数字了,不显示 -->
过滤器在控制器层的用法
例:
<div ng-controller="FilterController"> <h2>{{num}}</h2> <h2>{{str}}</h2> </div>
法1:
angular.module('myApp', []).controller(//在定义控制器时,将过滤器注入,格式为:过滤器名Filter;//注入的过滤器作为函数使用,第一个参数为要过滤的数据,后面依次为过滤器所需参数; 'FilterController', ['$scope','currencyFilter','lowercaseFilter', function($scope,cf,lcf){ $scope.str=lcf("Hello World"); $scope.num=cf(123.456789,'¥',3);}])
法2:
.controller(//当需要注入的过滤器较多时,也可以注入$filter服务,然后使用:$ft(“过滤器名”)(参数列表);如此处的str需要经过两层过滤。 'FilterController', ['$scope','$filter', function($scope,$filter){ var tmp=$filter("number")(123.3445,3); $scope.str=$filter("currency")(tmp,"¥");}]);
0 0
- 小人儿的笔记(AngularJS)--04
- 小人儿的笔记(AngularJS)--01
- 小人儿的笔记(AngularJS)--02
- 小人儿的笔记(AngularJS)--03
- angularjs 笔记(一)
- AngularJS学习笔记(3)- AngularJS 指令
- AngularJS学习笔记(4)- AngularJS 控制器
- 画个小人儿之建造者模式学习笔记[C++版]
- 画个小人儿之建造者模式学习笔记[C++版]
- AngularJS的学习笔记(一)
- 学习笔记angularjs的应用
- 帮助理解angularjs的scope(笔记mark)
- AngularJs笔记(看菜鸟教程整理的)
- AngularJS学习笔记(一)
- AngularJs自学笔记(1)
- AngularJS 学习笔记(一)
- AngularJs自学笔记(2)
- AngularJS学习笔记(1)
- 验证控件
- Setting up a Linux build environment
- POJ 2083 Fractal(递归)
- 终于放假了!!
- WKWebview相关知识点记录
- 小人儿的笔记(AngularJS)--04
- 群组头像拼接
- 最全免费CDN公共库——网站提速 .
- 设计模式在综合前置中的运用(三)--建造者模式
- 0001-数据库系统——(总述)
- Sparkstreaming中InputDStream的详解(源码)
- dropdownlist
- 拥有博客的第一天(心情文,非技术文)
- js实时监听输入框的值