[java学习7]angular的filter练习

来源：互联网发布：sqlserver true false 编辑：程序博客网时间：2024/05/19 00:43
<!--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>
0 0