过滤器

在表达式输出内容时可以使用过滤器对其内容做调整

语法使用 | 管道符号
{{ data | json }}
名称 说明
currency 格式化数字为货币格式
filter 从数组项中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写
date 时间格式化
json 把一个对象转换为 json 样式的字符串
number 数字格式化

currency

{{ money | currency }}

lowercase

{{ chars | lowercase }}

number

{{ num | number }}  //单纯的转换为一个数字

{{ num | number : 0 }}  //转换为数字后不保留小数

{{ num | number : 2 }}  //转换为数字后保留两位小数

date

丰富的时间格式化过滤器

//时间格式化
{{ time | date : 'yyyy-MM-dd HH:mm:ss Z' }}  
名称 说明
yyyy 年 以四位输出
yy 年 以两位输出
y 一年的 1 位数字表示,例如(公元1年,公元1年,公元199年199年)
MMMM 年加月,比如 1 年 5 个月
MM 月份,01 - 12 之间
M 月份
dd 天 两位数展示
d 天 可能会出现一位字符
hh 小时 两位数展示
h 小时 可能会出现一位字符
mm 分种 两位数展示
m 分钟 可能会出现一位字符
ss 秒 两位数展示
s 秒 可能会出现一位字符
medium MMM d, y h:mm:ss a
short M/d/yy h:mm a
fullDate EEEE, MMMM d, y
longDate MMMM d, y
mediumDate MMM d, y
shortDate M/d/yy
mediumTime h:mm:ss a
shortTime h:mm a

filter

从数组项中选择一个子集 , 从数组中筛选一组数据
<div ng-app="myApp" ng-controller="myAppCon">
    <ul>
    	<li ng-repeat="item in list | filter:'a'">{{ item }}</li>
    </ul>
</div>
<script>
   	angular.module('myApp', [])
   		.directive()
    	.controller('myAppCon', ['$scope', function($scope) {
       		$scope.list = ['A', 'B', 'C'];
     	}]);
</script>

自定义过滤器

当 angular 提供的过滤器满足不了你的业务时,你可以自定义过滤器
<div ng-app="myApp" ng-controller="myAppCon">
    {{ list | size }}
</div>
<script>
   	angular.module('myApp', [])
   		//创建一个获取对象长度的过滤器
   		.filter('size',function(){
   			return function(obj){
   				//返回长度
                return obj.length ? obj.length : Object.keys(obj).length;
            }
   		})
    	.controller('myAppCon', ['$scope', function($scope) {
       		$scope.list = ['A', 'B', 'C'];
     	}]);
</script>