过滤器格式
模块名称.filter('过滤器名字',function(){
return function(被过滤数据，条件1，条件2，。。。。){
//过滤操作
}
})
一、不带条件的过滤器
使用方式：
* （1）HTML中：<div>{{被过滤的数据 | 过滤器的名字}}</div> //跟内置过滤器一样的方式
* （2）js中：变量 = $filter("过滤器的名字")(被过滤的code数据) //一样的调用方式
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> 姓名: {{ msg | reverse }} //在html中使用 {{msg2}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope,$filter) { $scope.msg = "Runoob"; var msg = 'Hello' $scope.msg2 = $filter('reverse')( msg) //在js中使用 }); app.filter('reverse', function() { //可以注入依赖 return function(msg) { return msg.split("").reverse().join(""); } }); </script> </body> </html>
二、带条件的过滤器
使用方式：
* （1）HTML中：<div>{{被过滤的数据 | 过滤器的名字：条件1：条件2：。。。}}</div> //跟内置过滤器一样的方式
* （2）js中：变量 = $filter("过滤器的名字")(被过滤的code数据，条件1，条件2，。。。) //一样的调用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.core.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in users" ng-show = "$index | filterName:x.Name:names">//在html中調用過濾器
<td>{{$index}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.City }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$filter) {
$scope.users = [
{"Name":"Alfreds","City":"Berlin","Country":"Germany"},
{"Name":"Ana","City":"México D.F.","Country":"Mexico"},
{"Name":"Ana","City":"México D.F.","Country":"Mexico"},
{"Name":"Beverages","City":"London","Country":"UK"},
{"Name":"Ana","City":"México D.F.","Country":"Mexico"},
]
$scope.names = ["Alfreds","Ana","Ana","Beverages","Ana"]
});
app.filter('filterName',function(){
return function(index,userName,names){
console.log(index)
console.log(names.indexOf(userName))
if(index === names.indexOf(userName)) return true
else return false
}
})
</script>
</body>
</html>
【总结内置过滤器的使用方式】
(1)在HTML中一般格式为： {{被过滤的数据 | 过滤器名称：条件1：条件2.。。。}} ；过滤条件之间用‘:’隔开.這裡要注意是英文符号
(2)在代码中一般格式为： 变量 = $filter("过滤器名称")（被过滤数据，过滤条件1，过滤条件2，。。。。。。）
【自定义过滤器】
（1）定义格式：
model.filter(filterName，function(){
return function(参数1，参数2，参数3.。。。。参数N){
//过滤器处理部分
}
})
model:模块名称
filterName: 过滤器名称
参数1：被过滤的数据
参数2：一般为过滤条件，可以有多个，后面的参数3一直到参数N都是，根据需要添加。