AngularJS1.X学习笔记7-过滤器
最近参加笔试被虐成狗了，感觉自己的算法太弱了。但是还是先花点事件将这个AngularJS学习完。今天学习filter
一、内置过滤器
（1）过滤单个数据值
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>内置过滤器-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
<h1>今天是：{{now|date:"dd MMMM yyyy"}}</h1>
<table width="100%"> <tr>
<td>name</td>
<td>cat</td>
<td>price</td>
<td>expiry</td>
<td>json</td>
</tr> <tr ng-repeat="item in products">
<td>{{item.name}}</td>
<td>{{item.cat | uppercase}}</td>
<td>{{item.price | currency:"￥"}}</td>
<td>{{item.expiry | number:0}}</td>
<td>{{item | json}}</td>
</tr>
</table> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller("tableCtrl",function($scope){
$scope.products = [
{name:"苹果",cat:"水果",price:5.0,expiry:100000000},
{name:"香蕉",cat:"水果",price:6.0,expiry:9},
{name:"桃子",cat:"水果",price:7.0,expiry:7}, {name:"22",cat:"yy",price:5.0,expiry:5},
{name:"33",cat:"yy",price:9.0,expiry:6},
{name:"44",cat:"yy",price:4.0,expiry:2},
{name:"55",cat:"yy",price:8.0,expiry:4}, {name:"ww",cat:"tt",price:4.0,expiry:7},
{name:"qq",cat:"tt",price:3.0,expiry:9}, ]; var now = new Date();
$scope.now = now; });
</script> </body>
</html>
上例中用到了常见的内置过滤单个数据值的过滤器，下面一一说明。
- currency：格式化货币值，可以在后面加：跟参数，指定货币符号，默认为$
- number:格式化数字，后面跟：加参数，表示保留的小数位数，它会在千分为加上逗号
- date：参数为日期格式，可以将Date对象或者毫秒数格式化为指定的格式
- uppercase：字母大写
- lowercase:字母小写
- json：将javascript对象转换为json对象
（2）过滤集合
- 限制数量
<tr ng-repeat="item in products | limitTo:3">
表示只显示products的前3个项，参数为负数表示从最后一个往前算。
- 选取项
<tr ng-repeat="item in products | filter:(cat:'水果')">
用filter可以过滤出返回true的项，给个函数也是可以的，例如下面
<tr ng-repeat="item in products | filter:selectItems">
$scope.selectItems = function(item){
return item.cat == "tt" || item.cat == "yy";
}
- 排序
<tr ng-repeat="item in products | orderBy:'price'">
默认是升序排列，加个-号则降序，当然也可以对多个谓词进行排序，像这个样子
<tr ng-repeat="item in products | orderBy:['expiry','-price']'">
注意那个小小的引号。
二、创建自定义过滤器
1、单值过滤
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>自定义-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
<h1>今天是：{{now|date:"dd MMMM yyyy"}}</h1>
<table width="100%"> <tr>
<td>name</td>
<td>cat</td>
<td>price</td>
<td>expiry</td>
<td>json</td>
</tr> <tr ng-repeat="item in products">
<td>{{item.name | labelCase:"###"}}</td>
<td>{{item.cat | uppercase}}</td>
<td>{{item.price | currency:"￥"}}</td>
<td>{{item.expiry | number:0}}</td>
<td>{{item | json}}</td>
</tr>
</table> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller("tableCtrl",function($scope){
$scope.products = [
{name:"苹果",cat:"水果",price:5.0,expiry:100000000},
{name:"香蕉",cat:"水果",price:6.0,expiry:9},
{name:"桃子",cat:"水果",price:7.0,expiry:7}, {name:"22",cat:"yy",price:5.0,expiry:5},
{name:"33",cat:"yy",price:9.0,expiry:6},
{name:"44",cat:"yy",price:4.0,expiry:2},
{name:"55",cat:"yy",price:8.0,expiry:4}, {name:"ww",cat:"tt",price:4.0,expiry:7},
{name:"qq",cat:"tt",price:3.0,expiry:9}, ]; var now = new Date();
$scope.now = now; })
.filter("labelCase",function(){
return function(value,pre){
if(angular.isString(value)){
return pre+value;
}else{
return value;
}
}
});
</script> </body>
</html>
我们用filter方法创建自定义过滤器，filter方法有两个参数，第一个指定过滤器的名称，第二个是一个工厂函数，在工厂函数中返回一个工人函数，工人函数的第一个参数是当前值，其他参数是自定义参数。在本例中定义了一个labelCase过滤器，它的作用是在字符串前面加上自定义的前缀。
（2）创建一个集合过滤器。
跟过滤单个值的过滤器差不多，但是它要求传入的是一个数组，返回的还是一个数组
.filter("skip",function(){
return function(data,num){
if(angular.isArray(data)&&angular.isNumber(num)){
if(num>data.length || num<){
return data;
}else{
return data.slice(num);
}
}else{
return data;
}
}
});
这个过滤器表示的是跳过开头的几个数据项不显示。
（3）站在巨人的肩膀上
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>自定义-过滤单个数据值</title>
</head>
<body ng-controller="tableCtrl">
<h1>今天是：{{now|date:"dd MMMM yyyy"}}</h1>
<table width="100%"> <tr>
<td>name</td>
<td>cat</td>
<td>price</td>
<td>expiry</td>
<td>json</td>
</tr> <tr ng-repeat="item in products">
<td>{{item.name | labelCase2:"###":"@@@"}}</td>
<td>{{item.cat | uppercase}}</td>
<td>{{item.price | currency:"￥"}}</td>
<td>{{item.expiry | number:0}}</td>
<td>{{item | json}}</td>
</tr>
</table> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller("tableCtrl",function($scope){
$scope.products = [
{name:"苹果",cat:"水果",price:5.0,expiry:100000000},
{name:"香蕉",cat:"水果",price:6.0,expiry:9},
{name:"桃子",cat:"水果",price:7.0,expiry:7}, {name:"22",cat:"yy",price:5.0,expiry:5},
{name:"33",cat:"yy",price:9.0,expiry:6},
{name:"44",cat:"yy",price:4.0,expiry:2},
{name:"55",cat:"yy",price:8.0,expiry:4}, {name:"ww",cat:"tt",price:4.0,expiry:7},
{name:"qq",cat:"tt",price:3.0,expiry:9}, ]; var now = new Date();
$scope.now = now; })
.filter("labelCase",function(){
return function(value,pre){
if(angular.isString(value)){
return pre+value;
}else{
return value;
}
}
})
.filter("labelCase2",function($filter){
return function(value,pre,end){
return $filter('labelCase')(value,pre)+end;
}
});
</script> </body>
</html>
原来写了一个labelCase，以此为基础写了一个labelCase2, 使之可以同时加上前缀和后缀。由此可见我是巨人（标题是站在巨人的肩膀上）。
至此，过滤器就学完了。感觉过滤器虽然比较简单，但是作用不小，它可以方便的让同一数据模型有不同的表现形式，非常灵活。
AngularJS1.X学习笔记7-过滤器的更多相关文章
- AngularJS1.X学习笔记1-整体看看
听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
- day68—angularJS学习笔记之-过滤器
转行学开发,代码100天——2018-05-23 今天学习angularJS的过滤器的使用. angular中的常用过滤器用来修改数据格式,主要有以下几类: 1.大写,| uppercase 2.小写 ...
- 学习笔记_过滤器详细（过滤器JavaWeb三大组件之一）
过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l) init(FilterConfig):在服务器启动时会创建Filte ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- Javaweb学习笔记9—过滤器
今天来讲javaweb的第9阶段学习. 过滤器,我在本次的思维导图中将过滤器和监听器放在一起总结了,监听器比较简单就不单独写了. 老规矩,首先先用一张思维导图来展现今天的博客内容. ...
- 学习笔记_过滤器应用_1（分ip统计网站的访问次数）
分ip统计网站的访问次数 ip count 192.168.1.111 2 192.168.1.112 59 统计工作需要在所有资源之前都执行,那么就可以放到Filter中了. 我们这个过滤器不打算做 ...
- Java_Web学习笔记_过滤器应用案例（解决全站字符乱码）
解决全站字符乱码(POST和GET中文编码问题) servlet: l POST:request.setCharacterEncoding(“utf-8”); l GET: String user ...
- 学习笔记_过滤器详细_2（过滤器JavaWeb三大组件之一）
过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...
- 学习笔记_过滤器概述（过滤器JavaWeb三大组件之一）
过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...
随机推荐
- python操作excel常用的方法
读操作模块安装 pip install xlrd 写操作模块安装 pip install xlwt xlrd读操作 1.打开excel xl = xlrd.open_workbook('test.xl ...
- mybatis的Mapper文件配置
一.resultMap resultMap 元素是 MyBatis 中最重要最强大的元素. 该配置节点下如下子节点配置 id – 一个 ID 结果;标记结果作为 ID 可以帮助提高整体效能 const ...
- Rotational Region CNN
R2CNN 论文Rotational Region CNN for Orientation Robust Scene Text Detection与RRPN(Arbitrary-Oriented Sc ...
- DaTaX当成jar包当作第三方库启动的相关问题
上一篇已经大致的将了本地状况下DaTaX的纯Java代码启动的过程 http://www.cnblogs.com/blogsofmy/p/8287637.html不了解的请点超链接 这次我们来说说文件 ...
- 云计算之路-阿里云上：针对 docker swarm 故障的部署调整以及应急措施
针对这周 docker swarm 集群的频繁故障(详见故障一 .故障二.故障三),我们今天对 docker swarm 集群的部署进行了如下调整. 将 docker engine 由 “17.12 ...
- ubuntu,kali linux和windows三系统流水账——写给自己
我先说一下ubuntu和windows双系统安装的几种方法,最后总结kali linux的安装,想起什么写什么,所以有点乱.然后记录一下自己的使用过程中遇见的问题和解决的方法,还有我的个人建议. 我个 ...
- 给我一台全新的服务器，使用nginx+gunicorn+supervisor部署django
0.准备工作 在一台全新的服务器中新建用户以及用户的工作目录,之后的操作都以这个用户的身份进行,而不是直接用root. 举个栗子: 在服务器下新建用户rinka并赋予sudo权限 1) root登陆, ...
- 源码实现 --> atoi函数实现
atoi函数实现 atoi()函数的功能是将一个字符串转换为一个整型数值. 例如“12345”,转换之后的数值为12345,“-0123”转换之后为-123. #include <stdio.h ...
- linux --> 动态库和静态库
库的分类 根据链接时期的不同,库分为静态库和动态库之分. 静态库:在链接阶段被链接的,生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行. 动态库:在程序执行的时候被链接的,即使程 ...
- Java多线程：乐观锁、悲观锁、自旋锁
悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...