本文实例讲述了AngularJS自定义过滤器用法。分享给大家供大家参考,具体如下:
过滤器结构
{{带过滤数据 | 过滤器名:参数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="http://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="http://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="http://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="../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>
示例五:排序
<!doctype html> <html ng-app="a3_4"> <head> <title>表头排序</title> <script src="../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 .bold { font-weight: bold; cursor: pointer; } ul li span { width: 52px; float: left; padding: 0px 10px; } ul .focus { background-color: #cccccc; } </style> </head> <body> <div ng-controller="c3_4"> <ul> <li ng-class="{{bold}}"> <span>序号</span> <span ng-click="title='name';desc=!desc"> 姓名 </span> <span ng-click="title='sex';desc=!desc"> 性别 </span> <span ng-click="title='age';desc=!desc"> 年龄 </span> <span ng-click="title='score';desc=!desc"> 分数 </span> </li> <li ng-repeat=" stu in data | orderBy : title : desc"> <!--title:属性值,desc:升序or降序--> <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_4 = angular.module('a3_4', []); a3_4.controller('c3_4', ['$scope', function ($scope) { $scope.bold = "bold"; $scope.title = 'name'; $scope.desc = 0; $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} ]; }]) </script> </body> </html>
示例六:输入过滤
<!doctype html> <html ng-app="a3_5"> <head> <title>字符查找</title> <script src="../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 .bold { font-weight: bold; cursor: pointer; } ul li span { width: 52px; float: left; padding: 0px 10px; } ul .focus { background-color: #cccccc; } </style> </head> <body> <div ng-controller="c3_5"> <div> <input id="txtkey" type="text" ng-model="key" placeholder="请输入姓名关键字"/> </div> <ul> <li ng-class="{{bold}}"> <span>序号</span> <span>姓名</span> <span>性别</span> <span>年龄</span> <span>分数</span> </li> <li ng-repeat=" stu in data | filter : {name:key}"> <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_5 = angular.module('a3_5', []); a3_5.controller('c3_5', ['$scope', function ($scope) { $scope.bold = "bold"; $scope.key = ''; $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} ]; }]) </script> </body> </html>
参考:
【angularjs实战】
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。