angularjs 自定义过滤器

过滤器格式

模块名称.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都是，根据需要添加。