[java学习7]angular的filter练习

最新推荐文章于 2019-08-12 16:01:00 发布
最新推荐文章于 2019-08-12 16:01:00 发布
阅读量364 收藏
点赞数
分类专栏： java相关 文章标签： angular filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyanq528/article/details/52933536
版权 
<!--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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular学习笔记之angular的$filter服务浅析
09-01
本文是小编记录的angular学习笔记，通过本文首先给大家介绍了$filter服务，然后介绍下内置filter及filter的简单使用，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧
Java EE 8 and Angular epub
05-14
Java EE 8 and Angular 英文epub 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
angular用于计算一系列数据总和的filter
weixin_34348805的博客
10-27 513
目的：有个账单数据，需要计算这些数据的总和 //index.js function MainController($scope) { var vm = this; vm.sum = 0; vm.items = [ { name: '早餐', money: 4 }, { ...
Angular学习笔记
weixin_33725807的博客
02-24 436
配置开发环境 开发工具 Node.js VS Code / WebStorm 搭建NPM私服 推荐使用Nexus，概念和配置方法同Maven私服一致，分为proxy、hosted、group三类。创建proxy如下：Remote URL: https://registry.npmjs.orghosted、group创建方法不再赘述。创建完毕后在home下创建.npmrc文件，其内填写group...
angular filter等知识
weixin_30265103的博客
08-12 108
部分知识来源 Angular之自定义filter的用法 Javascript parseFloat、parseDouble类型转换，数值加减，四舍五入 Angular内置过滤器 自定义filter 1.先自定义过滤器 var pmsApp = angular.module("pmsApp", ["ui.router", 'ui.bootstrap', 'ui.bootstrap....
angular6踩坑记
wangyuanpei123的博客
11-05 1792
1、ts里route跳转 import { Router} from '@angular/router'; public router: Router, this.router.navigate(['/project/pm'],{queryParams:{'unique_no':unique_no}); 页面 A页面 <a [routerLink]="['../aaa...
Angular js学习视频教程
04-14
前端教程之 Angular 教程
Angular工具方法学习
01-21
angular为我们提供了很多的工具方法。 angular.bind 更改this指向 var obj1 = { name : 'obj1', show : function(str){ return this.name + str; } }; var obj2 = { name : 'obj2' }; var a = angular.bind...
[angular]服务之4$window
灵眼儿上方
12-26 2551
[angular]服务之4$window
[angular]指令之2replace
灵眼儿上方
12-21 2117
[angular]指令之2replace
[angular]指令之4templateUrl
灵眼儿上方
12-21 2033
[angular]指令之4templateUrl
[angular]指令之6require
灵眼儿上方
12-22 1550
[angular]指令之6require
[angular]服务之2$scope之$watch、$watchGroup、$watchCollection
灵眼儿上方
12-25 1350
[angular]服务之2$scope之$watch、$watchGroup、$watchCollection
[angular]指令之7bindToController
灵眼儿上方
12-22 1236
[angular]指令之7bindToController
[angular]指令之3transclude
灵眼儿上方
12-21 932
[angular]指令之3transclude
[jaVA学习2]InputStreamReader练习读取中文文档
灵眼儿上方
10-15 607
[jaVA学习1]InputStreamReader练习读取中文文档
[angular]指令之1scope
灵眼儿上方
12-20 523
[angular]指令之1scope
[angular]服务之1创建自定义服务
灵眼儿上方
12-23 432
[angular]服务之1创建自定义服务
angular学习路线
最新发布
06-09
学习 Angular 的路线可以大致分为以下几个阶段： 1. HTML、CSS 和 JavaScript...总之，学习 Angular 需要长期的投入和练习。通过不断的实践和学习，你可以逐渐掌握 Angular 的技能，并成为一名优秀的 Angular 开发者。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值