{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}} app.filter('过滤器名', function () { return function (待过滤数据, 参数....) { ...... return 已过滤数据; }
示例一：是否包含
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div ng-controller="myAppCtrl"> <div> <table> <tr> <th>Name</th> <th>Phone</th> </tr> <!--写法1--> <tr ng-repeat="friend in friends |myfilter"> <!--写法2--> <!--<tr ng-repeat="friend in newArr=(friends | myfilter)">--> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> </tr> </table> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myAppCtrl", ["$scope", function ($scope) { $scope.friends = [{name: 'John', phone: '44555-1276'}, {name: 'Annie', phone: '800-BIG-MARY'}, {name: 'Mike', phone: '11555-4321'}, {name: 'Adam', phone: '33555-5678'}, {name: 'David', phone: '387555-8765'}, {name: 'Mikay', phone: '555-5678'}]; }]); app.filter("myfilter", function () { return function (input) { var output = []; angular.forEach(input, function (value, key) { console.log("value==" + JSON.stringify(value)); console.log("value.phone类型==" + typeof (value.phone)); console.log("value.phone.indexOf==" + value.phone.indexOf("555")); /*js中没有contains方法，使用indexOf来判断字符串是否包含*/ /*indexOf字符串出现的位置，没有则返回-1*/ //方法一： if (value.phone.indexOf("555") >= 0) { output.push(value); } //方法二： // if (value.phone.indexOf("555") !== -1) { // output.push(value); // } }); return output; } }); </script> </body> </html>
示例二：倒序
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div ng-controller="myAppCtrl"> 姓名:{{ name }}<br> 倒序:{{ name | reverse }}<br> 倒序并大写:{{ name | reverse:true }} </div> <script type="text/javascript"> var myAppModule = angular.module("myApp", []); myAppModule.controller("myAppCtrl", ["$scope", function ($scope) { $scope.name = "xuqiang"; }]); myAppModule.filter("reverse", function () { return function (input, uppercase) { <!--input就是其中name代表的值。--> <!--uppercase这个bool值，判断是否要进行大小写转换。--> var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } if (uppercase) { out = out.toUpperCase(); } return out; <!--返回过滤后的字符串--> } }); </script> </body> </html>
示例三：替换
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body ng-controller="myAppCtrl"> <div> <div> {{welcome | replaceHello}}<br/> {{welcome | replaceHello:3:5}}<br/> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myAppCtrl", ["$scope", function ($scope) { $scope.welcome = "Hello AngularJs"; }]); //自定义过滤器 app.filter('replaceHello', function () { return function (input, n1, n2) { console.log("input==" + input); console.log("n1==" + n1); console.log("n2==" + n2); return input.replace(/Hello/, '您好'); } }); </script> </body> </html>
示例四：筛选
<!doctype html> <html ng-app="a3_3"> <head> <title>自定义过滤器</title> <script src="https://www.jb51.net/Script/angular.min.js" type="text/javascript"></script> <style type="text/css"> body { font-size: 12px; } ul { list-style-type: none; width: 408px; margin: 0px; padding: 0px; } ul li { float: left; padding: 5px 0px; } ul .odd { color: #0026ff; } ul .even { color: #ff0000; } ul .bold { font-weight: bold; } ul li span { width: 52px; float: left; padding: 0px 10px; } ul .focus { background-color: #cccccc; } </style> </head> <body> <div ng-controller="c3_3"> <ul> <li ng-class="{{bold}}"> <span>序号</span> <span>姓名</span> <span>性别</span> <span>年龄</span> <span>分数</span> </li> <li ng-repeat=" stu in data | young:0" ng-class-odd="'odd'" ng-class-even="'even'"> <span>{{$index+1}}</span> <span>{{stu.name}}</span> <span>{{stu.sex}}</span> <span>{{stu.age}}</span> <span>{{stu.score}}</span> </li> </ul> </div> <script type="text/javascript"> var a3_3 = angular.module('a3_3', []); a3_3.controller('c3_3', ['$scope', function ($scope) { $scope.bold = "bold"; $scope.data = [ {name: "张明明", sex: "女", age: 24, score: 95}, {name: "李清思", sex: "女", age: 27, score: 87}, {name: "刘小华", sex: "男", age: 28, score: 86}, {name: "陈忠忠", sex: "男", age: 23, score: 97} ]; }]); a3_3.filter('young', function () { return function (e, type) { var _out = []; var _sex = type ? "男" : "女"; for (var i = 0; i < e.length; i++) { if (e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex) _out.push(e[i]); } return _out; } }); </script> </body> </html>
示例五：排序