currency
格式化数字为货币形式 (如 $1,234.56)。
<!-- currency默认是美元 -->
<h2>{{ ctrl.money | currency }}</h2>
<h2>{{ ctrl.money | currency : '￥' }}</h2>
uppercase
转换字符串为大写形式。
<h2> {{ "abcd" | uppercase }} </h2>
lowercase
转换字符串为小写形式。
<h2> {{ "ABCD" | lowercase }} </h2>
limitTo
限制字符串或数组的长度
<!-- 管道符可以连着用，继续过滤 -->
<h2> {{ ctrl.str | limitTo : 3 | uppercase }} </h2>
<!-- 过滤数组后，获取2个长度，然后获取第一个 -->
<h2> {{ (ctrl.arr | limitTo : 2)[1] }} </h2>
number
格式化数字到文本。
<h2> {{ 1234567 | number }} </h2>
<!-- 保留两位小数 -->
<h2> {{ 1234567 | number : 2 }} </h2>
<!-- 支持四舍五入 -->
<h2> {{ 1234567.855 | number : 2 }} </h2>
date
格式化date到字符串，基于format的要求。
<h2> {{ ctrl.time | date : 'yy-MM-dd hh:mm:ss.sss' }} </h2>
Paste_Image.png
orderBy
可以对数字、字符串进行排序
默认排序为升序
<h2> {{ ctrl.arr | orderBy }} </h2>
排降序
<h2> {{ ctrl.arr | orderBy : order : true }} </h2>
配合ng-repeat使用
<li ng-repeat = "item in ctrl.arr | orderBy"> {{ item }} </li>
数组中有对象的排序（按照对象的某个属性去排序）
<h2> {{ ctrl.persons | orderBy : "age" }} </h2>
数据结构如下
Paste_Image.png
实现过滤排序小功能
<h1>过滤排序小功能</h1>
<div>条件过滤：</div>
<input type="text" ng-model="ctrl.queryFilter">
<div>条件排序</div>
<select name="" id="" ng-model="ctrl.queryType">
<option value="name">按照名字排序</option>
<option value="age">按照年龄排序</option>
</select>
<div>数据展示</div>
<ol>
<!-- filter : ctrl.queryFilter按照input输入框输入的值去过滤 -->
<!-- ctrl.queryType按照下拉选框的条件进行排序 -->
<li ng-repeat="person in ctrl.persons | filter : ctrl.queryFilter
| orderBy : ctrl.queryType">
{{ person.name }}==={{ person.age }}
</li>
</ol>
效果如下
GIF.gif
自定义过滤器
功能：根据某个字符串，过滤掉这个字符串中的数字
视图
<h2> {{ ctrl.str | filterNum }} </h2>
控制器
angular.module("myApp",[])
.controller("MyCtrl",[function () {
var self = this;
self.str = "hello 123 world 456"
}])
// 在这里自定义过滤器
// 这个过滤器的功能是根据某个字符串，过滤掉这个字符串中的数字
.filter("filterNum",[function () {
// filterNum是过滤器的函数
// 在这个匿名函数中，必须返回一个函数
// 返回的这个函数才是要处理过滤的逻辑
return function (str) {
// str就是要处理的字符串
return str.replace(/[0-9]/g,"")
}
}])
效果显示
Paste_Image.png
