[java学习7]angular的filter练习

叁歲伎倆 2022-07-15 00:16 215阅读 0赞

<!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>