简单介绍AngularJS过滤器filter用法，每个都将列出用法代码以便加深了解；
内置过滤器：
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
用法：
1.currency(货币)
使用currency可以将数字格式化为货币，默认美元符号，你可以自己传入所需的符号，如人民币：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div style="width: 500px;margin: 0 auto;">
<div ng-controller="homeCtr">
<p>{{initNum | currency}}</p>
<p>{{initNum | currency:'￥'}}</p>
<ul ng-repeat="n in initArr">
<li>{{n | currency}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('homeCtr',['$scope',function($scope){
$scope.initNum = 10;
$scope.initArr = [10,20,30,40,50];
}])
</script>
</body>
</html>
2.date(日期)
原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：
{{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE’}}
参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。
<p>{{initDate | date:'yyyy/MM/dd hh:mm:ss EEEE'}}</p>
<ul ng-repeat="n in initDateArr">
<li>{{n | date:'yyyy.MM.dd hh:mm:ss'}}</li>
</ul>
<!--时间日期格式自己改,基本满足平常开发需求-->//
$scope.initDate = '1523503158789';
$scope.initDateArr = [
'1523502700688',
'1523502953681',
'1523502971335',
'1523502980482'
]
3 filter(匹配子串)
filter用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。
<div ng-controller="homeCtr">
<p>匹配属性值中包含'张'的所有项</p>
<ul ng-repeat="m in initMemberArr | filter:'张'">
<li>{{m.name}}</li>
<li>{{m.age}}</li>
</ul>
<p>匹配属性值中包含 2的所有项</p>
<ul ng-repeat="m in initMemberArr | filter:2">
<li>{{m.name}}</li>
<li>{{m.age}}</li>
</ul>
<p>匹配age属性值中包含 2的所有项</p>
<ul ng-repeat="m in initMemberArr | filter:{age:2}">
<li>{{m.name}}</li>
<li>{{m.age}}</li>
</ul>
<p>匹配id属性值中包含 2,并且age属性中包含2的项</p>
<ul ng-repeat="m in initMemberArr | filter:{id:2} | filter:{age:2}">
<li>{{m.id}}</li>
<li>{{m.name}}</li>
<li>{{m.age}}</li>
</ul>
<p>匹配age属性值 大于 30的项</p>
<ul ng-repeat="m in initMemberArr | filter:ageFilt">
<li>{{m.id}}</li>
<li>{{m.name}}</li>
<li>{{m.age}}</li>
</ul>
</div> app.controller('homeCtr',['$scope',function($scope){
$scope.initMemberArr = [
{
id:12,
name:'张一',
age:20,
},
{
id:23,
name:'张二',
age:31,
},
{
id:34,
name:'李三',
age:12,
},
{
id:45,
name:'张五',
age:33,
},
{
id:56,
name:'李六',
age:24,
}
]
//定义返回age属性大于30的方法
$scope.ageFilt = function(arr){
return arr.age > 30;
}
}])结果如下展示
4.json(格式化json对象)
json过滤器可以把一个js对象格式化为json字符串，没有参数。一般也不会在页面上用，或者在js中用，作用如JSON.stringify()，文章最后会写出来在controller里面使用过滤器；权当看看
<p>{{testObj}}</p>
<p>{{testObj | json}}</p>
<p>{{initMemberArr}}</p>
<p>{{initMemberArr | json}}</p>$scope.initMemberArr = [
{
id:12,
name:'张一',
age:20,
},
{
id:23,
name:'张二',
age:31,
}
]
$scope.testObj = {a:1,b:2};5 limitTo(限制数组长度或字符串长度)
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。
<p>截取字符串前三位</p>
<p>{{initStr | limitTo:3}}</p>
<p>initMemberArr 数组截取前两项 ，每项的id截取前四位</p>
<ul ng-repeat = "m in initMemberArr | limitTo:2">
<li>{{m.id | limitTo:4}}</li>
</ul> $scope.initMemberArr = [
{
id:'123456789',
name:'张一',
age:20,
},
{
id:'987654321',
name:'张二',
age:31,
},
{
id:'234765981',
name:'李三',
age:12,
}
]
$scope.initStr = 'abcdefg';
6 lowercase(小写)
把数据转化为全部小写
7 uppercase(大写)
把数据转化为全部大写
<p>{{str1 | uppercase}}</p>
<p>{{str2 | lowercase}}</p>这两个用法很简单
$scope.str1 = 'abcf';
$scope.str2 = 'Abcd';8 number(格式化数字)
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数
<p>{{num1 | number}}</p>
<p>保留四位小数</p>
<p>{{num2 | number:4}}</p>
<p>保留两位小数</p>
<p>{{num3 | number:2}}</p>$scope.num1 = 123456789;
$scope.num2 = 1357924680;
$scope.num3 = 1357.2498;
9 orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）
基本应用格式为:
ng-repeat=”item in itemList | orderBy:p1:p2”
参数p1可以是字段名或自定义函数，p2指是否逆序，默认是false
//
多字段排序:
ng-repeat=”item in itemList | orderBy:[orderIt,’name’,’-amount’]
第一个参数传递数组，可以是自定义函数或字段名，字段名前面加“-”，代表倒排序。
<p>按照id排序</p>
<ul ng-repeat=" m in initMemberArr | orderBy : 'id'">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul>
<p>按照age排序</p>
<ul ng-repeat=" m in initMemberArr | orderBy : 'age'">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul>
<p>按照name排序</p>
<ul ng-repeat=" m in initMemberArr | orderBy : 'name'">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul>
<p>按照id降序</p>
<ul ng-repeat=" m in initMemberArr | orderBy : 'id':true">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul>
<p>按照id降序,字段前加-</p>
<ul ng-repeat=" m in initMemberArr | orderBy : '-id'">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul>
<p>多字段排序-按id升序，id一样的，按age的倒序，大的排前；</p>
<ul ng-repeat=" m in initMemberArr | orderBy :['id','-age']">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul> $scope.initMemberArr = [
{
id:12,
name:'张一',
age:20,
},
{
id:14,
name:'张二',
age:31,
},
{
id:13,
name:'李三',
age:12,
},
{
id:12,
name:'老五',
age:28,
}
]
自定义过滤器
<p>将对象数组中每一项的name改成顺序的第几名</p>
<ul ng-repeat=" m in initMemberArr | joinStr">
<li>id:{{m.id}}-------name:{{m.name}}------age:{{m.age}}</li>
</ul> var app = angular.module('myApp', []);
app.controller('homeCtr',['$scope',function($scope){
$scope.initMemberArr = [
{
id:12,
name:'张一',
age:20,
},
{
id:14,
name:'张二',
age:31,
},
{
id:13,
name:'李三',
age:12,
},
{
id:12,
name:'老五',
age:28,
}
]
}])
app.filter('joinStr',function(){ //将对象数组中每一项的name改成顺序的第几名，当然这在页面直接用$index,更简单，这只是为了看写法；
return function(arr){
for(var i=0;i<arr.length;i++){
arr[i].name = '第' + (i + 1) + '名';
}
return arr;
}})格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在return的那个函数中，作为第二个参数，或者更多个参数也可以。
过滤器使用
1.使用内置的过滤器，可以像上面写的，直接页面模版中使用，
{{ expression | filter }}；
可以多个filter连用，
{{ expression | filter1 | filter2 | … }}
filter可以接收参数，参数用 : 进行分割
{{ expression | filter:argument1:argument2:… }}
2 在controller中使用，需要注入 $filter使用，
使用内置的过滤器
使用自定义的过滤器
var app = angular.module('myApp', []);
//注入$filter
app.controller('homeCtr',['$scope','$filter',function($scope,$filter){
$scope.initMemberArr = [
{
id:12,
name:'张一',
age:20,
},
{
id:14,
name:'张二',
age:31,
},
{
id:13,
name:'李三',
age:12,
},
{
id:12,
name:'老五',
age:28,
}
]
//使用内置的过滤器
$scope.resNum = $filter('currency')(123456789,'￥');
console.log($scope.resNum);
$scope.resStr = $filter('uppercase')('abcdefGh');
console.log($scope.resStr);
$scope.resSubStr = $filter('limitTo')('abcdefghi', 3);
console.log($scope.resSubStr);
...
...
...
//使用自定义的过滤器
$scope.resArr = $filter('odditems')($scope.initMemberArr);
console.log($scope.resArr);//只剩第一三项
}]);
//自定义过滤器，返回数组的奇数项；
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++){
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});
看到这，差不多开发时filter过滤器用法都可以自己写出来哈，只要js知识好些，复杂的过滤器，复杂的自定义过滤器，差不多都可以实现………………………