<!--angular filter练习--> <!--参考: https://segmentfault.com/a/1190000002758481--> <!--http://www.tuicool.com/articles/vmmeQvj--> <!DOCTYPE html> <html lang="en" ng-app="filterApp"> <head> <meta charset="UTF-8"> <script src="../FrameWork/angular.js"></script> <script src="../FrameWork/angular-route.js"></script> <script src="../FrameWork/angular-ui-router.js"></script> <script src="../FrameWork/angular-animate.js"></script> <link rel="stylesheet" href="../Css/bootstrap.css"> <link rel="stylesheet" href="../Css/backColor.css"> <title>测试Filter的功能</title> </head> <body ng-controller="filterController"> <div> <h3>currency指令:格式化货币;原型:function(amount, currencySymbol, fractionSize)</h3> <span>12|currency值=<b>{{12|currency}}</b>(小数位:默认2,第三位四舍五入)</span><br> <span>12.45|currency:'CHY¥':1值=<b>{{12.45|currency:'CHY¥':1}}</b>(单位:CHY¥;小数位:1)</span><br> <span>12.55|currency:undefined:0值=<b>{{12.55|currency:undefined:0}}</b> (单位:默认;小数位:0,小数位第1位四舍五入;undefined表示默认的符号)</span><br> </div> <div> <h3>date指令:格式化日期;原型:function(date, format, timezone)</h3> <span>当前日期:=<b>{{nowDate}}</b></span><br> <span>当前日期|date:"yyyy-MM-dd hh:mm:ss":=<b>{{nowTime|date:"yyyy-MM-dd hh:mm:ss"}}</b>(一般格式)</span><br> <span>当前毫秒:=<b>{{nowTime}}</b>(从1970.1.1开始的毫秒数)</span><br> <span>当前毫秒|date:"MM/dd/yyyy @ h:mma":"UTC":=<b>{{nowTime|date:"MM/dd/yyyy @ h:mma":"UTC"}}</b>(指定timezone为UTC)</span><br> </div> <div> <h3>filter指令:过滤数组;原型:function(array, expression, comparator)</h3> <span>item in myArr|filter:'0'(注意:包含的字符串):</span><br> <ul> <li ng-repeat="item in myArr|filter:'0'">name:{{item.name}};age:{{item.age}}</li> </ul> <span>item in myArr|filter:myFilter(注意:后面不能传参数)</span><br> <ul> <li ng-repeat="item in myArr|filter:myFilter">name:{{item.name}};age:{{item.age}}</li> </ul> <span>item in myArr|filter:{age:22}(注意:对对象的属性过滤;不能age:22|age:20、age:22|20、age>22这样写)</span><br> <ul> <li ng-repeat="item in myArr|filter:{age:22}">name:{{item.name}};age:{{item.age}}</li> </ul> <span>指定comparator为false或者undefined,即为默认值可不传,将以大小写不敏感的方式匹配任意内容,true即大小写及内容均需完全匹配</span><br> <span>item in myArr|filter:'Alice':true(注意:true即大小写及内容均需完全匹配)</span><br> <ul> <li ng-repeat="item in myArr|filter:'Alice':true">name:{{item.name}};age:{{item.age}}</li> </ul> </div> <div> <h3>json指令:格式化成标准的JSON格式;原型:function(object, spacing)</h3> <span>item|json|uppercase(注意:只是格式化了下)</span><br> <ul> <li ng-repeat="item in myArr">{{item|json|uppercase}}</li> </ul> </div> <div> <h3>limitTo指令:选取前N个记录;原型:function(input, limit)</h3> <span>item in myArr|limitTo:3|filter:{age:20}(注意:取前3个,并且age属性=20)</span><br> <ul> <li ng-repeat="item in myArr|limitTo:3|filter:{age:20}">{{item|json|uppercase}}</li> </ul> </div> <div> <h3>number指令:格式化数字;原型:function(number, fractionSize)</h3> <span>3位一组用逗号隔开,后面是保留的小数位~</span><br> <span>"3456789.678"|number={{"3456789.678"|number:1}}</span><br> </div> <div> <h3>orderBy指令:排序;原型:function(array, sortPredicate, reverseOrder)</h3> <ul> <li ng-repeat="item in myArr|orderBy:['name']:true">{{item|json|uppercase}}</li> </ul> </div> <div> <h3>自定义Filter指令:一定要返回函数</h3> <span>{{"hello"|myFilter|nUpperFilter:3}}</span> </div> </body> <script> var filterApp = angular.module("filterApp", []); filterApp.controller("filterController", function ($scope) { var d = new Date(); $scope.nowDate = d.toLocaleString(); $scope.nowTime = d.getTime(); $scope.myArr = [{name: 'Tom', age: 20}, {name: 'Tom Senior', age: 50}, {name: 'May', age: 21}, {name: 'Jack', age: 20}, {name: 'Alice', age: 22}]; $scope.myFilter = function (item) { return item.age > 20; } }).filter("myFilter", function () { return function (str) { return str + "myFilter"; } }).filter("nUpperFilter", function () { return function (input, n) { if (isNaN(input)) { var output = []; var index = n - 1 || 0; var indexChar = input[index].toUpperCase(); for (var i = 0; i < input.length; i++) { if (index == i) { output.push(indexChar); } else { output.push(input[i]); } } return output.join(''); } else { return input; } } }) </script> </html>
[java学习7]angular的filter练习
最新推荐文章于 2022-02-27 15:44:31 发布