angularjs-自定义过滤器示例

xiaoxiao2021-03-25 186

过滤器结构

{{带过滤数据 | 过滤器名：参数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>  <tr ng-repeat="friend in 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="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">  <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实战】

转载请注明原文地址: https://ju.6miu.com/read-826.html

技术

最新回复(0)