通过过滤器可以实现很多数据格式化的功能
常用方法形如{{ data | uppercase}} 或者是{{ 123.456 | number:2 }}
也可以通过在控制器中注入$filter来实现功能
angular.module('MyApp',[]) .controller('FilterController',function($scope,$filter){ $scope.data = $filter('uppercase')('ard'); });
1.currency 货币单位
2.date 日期格式化
2.1.日期的格式化
2.2.年份的格式化
2.3.月份格式化
2.4.日期格式化
2.5.小时格式化
{{ today | date:'HH' }} 24小时制数字小时:
{{ today | date:'H' }} 一天中的第几个小时:
{{ today | date:'hh' }} 12小时制数字小时:
{{ today | date:'h' }} 上午或下午的第几个小时:
2.6.分钟格式化
{{ today | date:'mm' }} 09
{{ today | date:'m' }} 9
2.7.秒数格式化
{{ today | date:'ss' }} 02
{{ today | date:'s' }} 2
{{ today | date:'.sss' }} .995
2.8.字符格式化
{{ today | date:'a' }} AM
{{ today | date:'Z' }} 0800 时区标识
2.8.自定义的组合格式化
{{ today | date:'MMMd, y' }} Aug9, 2013
{{ today | date:'EEEE, d, M' }} Thursday, 9, 8
{{ today | date:'hh:mm:ss.sss' }} 12:09:02.995
3.从数组中筛选符合条件的结果
3.1.数组中对象为简单对象(纯数字或字符串)
3.1.1.过滤条件为简单字符串 {{ data | filter:'abc' }}
只要存在filter中过滤条件的字符串都能被返回
$scope.data = ['abc','abcde','hahaha']
输出的结果为 ['abc','abcde']
如果想要排除某种字符串 则使用 {{ data | filter:'!abc'}}
3.2.数组中对象为复杂对象
3.2.1.过滤条件为简单字符串 {{ data | filter:'abc' }}
只有某个对象的的键值对中的值符合条件才会被输出。3.2.2.过滤条件为对象 {{ data | filter:{'name':'alex'} }}
只有对象中包含该键,且键的值等于过滤条件的才会被输出。
如果不需要指定data中是哪个键的属性中包含指定的属性,那么可以用
{{ data | filter:{'$':'alex'} }} 这种写法,此时就是类似将对象转为字符串,如果值中包含指定的字符串,则输出该对象,类似与上面直接用一个字符串作为条件来过滤。
3.3.自定义函数实现过滤逻辑校验
3.3.1.{{ data | filter:isCapitalized }}
通过自定义函数isCapitalized 中需要过滤的数据进行逐个筛选,如果满足条件,函数返回true
var app = angular.module('myApp',[]); app.controller('MyCtrl',function($scope){ $scope.data = [{'name':'alex','age':'18'},{'name':'peter','age':'19'},{'name':'keke','gender':'woman'}]; $scope.dataTwo = ['Alex','peter','json']; $scope.isCapitalized = function(obj){ return obj.name == 'alex'; } });
3.3.2.自定义filter(可以看作上面自定义函数的另一种写法)
var app = angular.module('myApp',[]); app.filter('myReverse',function(){ return function(text){ return text.split("").reverse().join(""); } })
3.4.使用filter时候的第二个参数
3.4.1.TRUE {{ data | filter:'xxx':true}}
此时的过滤条件为全等,只有data中的数据与过滤条件完全一致(大小写,类型等),才能被输出。
3.4.2.FALSE {{ data | filter:'xxx':false}}
此时的过滤条件为非全等,只有data中的数据与过滤条件字面值一致(忽略大小写,类型等),就能被输出。
3.4.3.JSON {{ data | filter:'xxx':json}}
此时会将结果以json的格式输出
3.5.limitTo {{ data | limitTo:n }}
n为正值,从前往后截取。n为负值,从后往前截取。
若data为简单对象,返回的也是同种类型对象。
若data为对象数组,返回的也是数组。
若n大于data的长度,返回整个对象。
3.6.uppercase {{ data | uppercase }}
将字符串转为大写
3.7.lowercase {{ data | lowercase }}
将字符串转为小写
3.8.number {{ data | number:x}}
将数字添加千分符,默认x=3,即保留小数点后三位,进行四舍五入。
3.9. orderBy {{ data | orderBy:fun:true}} (fun为必填,第二个参数默认false)
3.9.1.fun为函数
此时需要自定义一个函数来实现入参的处理
若定义函数为
$scope.sortSimpleType(op){
3.9.2.fun为字符
如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。
对于元素是对象的数组按照某一个属性来排序,此时只需要指定字符为属性名就行,相比于上面需要自定义一个函数更便捷。
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}
输出结果
3.9.3.fun为数组
如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。
{{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}
输出结果
[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]