最近参加笔试被虐成狗了,感觉自己的算法太弱了。但是还是先花点事件将这个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-过滤器的更多相关文章

  1. AngularJS1.X学习笔记1-整体看看

    听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...

  2. day68—angularJS学习笔记之-过滤器

    转行学开发,代码100天——2018-05-23 今天学习angularJS的过滤器的使用. angular中的常用过滤器用来修改数据格式,主要有以下几类: 1.大写,| uppercase 2.小写 ...

  3. 学习笔记_过滤器详细(过滤器JavaWeb三大组件之一)

    过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l)  init(FilterConfig):在服务器启动时会创建Filte ...

  4. AngularJS1.X学习笔记8-自定义指令(上)

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

  5. Javaweb学习笔记9—过滤器

      今天来讲javaweb的第9阶段学习.   过滤器,我在本次的思维导图中将过滤器和监听器放在一起总结了,监听器比较简单就不单独写了.   老规矩,首先先用一张思维导图来展现今天的博客内容.     ...

  6. 学习笔记_过滤器应用_1(分ip统计网站的访问次数)

    分ip统计网站的访问次数 ip count 192.168.1.111 2 192.168.1.112 59 统计工作需要在所有资源之前都执行,那么就可以放到Filter中了. 我们这个过滤器不打算做 ...

  7. Java_Web学习笔记_过滤器应用案例(解决全站字符乱码)

    解决全站字符乱码(POST和GET中文编码问题) servlet: l  POST:request.setCharacterEncoding(“utf-8”); l  GET: String user ...

  8. 学习笔记_过滤器详细_2(过滤器JavaWeb三大组件之一)

    过滤器详细 5 四种拦截方式 我们来做个测试,写一个过滤器,指定过滤的资源为b.jsp,然后我们在浏览器中直接访问b.jsp,你会发现过滤器执行了! 但是,当我们在a.jsp中request.getR ...

  9. 学习笔记_过滤器概述(过滤器JavaWeb三大组件之一)

    过滤器Filter Filter和Lister是Servlet规范里的两个高级特性.不同于Servlet,它们不用于处理客户端请求,只用于对request.response进行修改或者对context ...

随机推荐

  1. java微信公众号开发token验证失败的问题及解决办法

    本文引自http://m.blog.csdn.net/qq_32331997/article/details/72885424 微信公众平台服务器配置时,需要引入token,但是提交的时候总是提示to ...

  2. Redis持久化方案

    Redis可以实现数据的持久化存储,即将数据保存到磁盘上. Redis的持久化存储提供两种方式:RDB与AOF.RDB是默认配置.AOF需要手动开启. 默认redis是会以快照的形式将数据持久化到磁盘 ...

  3. C++学习-5

    1.static_cast静态转换<>要转换的类型,不适用于指针转换 reinterpret_cast<char*>()指针类型的转换 涉及到const,必须用const_ca ...

  4. OSI模型和TCP/IP协议族(二)

    OSI模型中的各层 物理层 物理层(physical layer)协调通过物理媒体传送比特流时所需要的各种功能.物理层涉及到接口和传输媒体的机械和电器规约.它还定义了这些物理设备即接口为了实现传输必须 ...

  5. PAT乙级-1056. 组合数的和(15)

    给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...

  6. 集合中存的是引用,分析一道容易混淆的Java面试题

    我们自定义的类是以引用的形式放入集合,如果使用不当,会引发非常隐蔽的错误.就拿我经常问到的一个面试题来说明这个知识点. 第一步,我们定义一个Car类型的类,其中只有一个int类型id属性. 第二步,创 ...

  7. vue单页页面开发教程及注意事项

    如下图:   1.安装node.js webpack node -v 查看版本 webpack -v 2.安装脚手架 vue-cli npm install -g vue-cli 3. 在项目文件夹创 ...

  8. 使用padding来合理布局自己的容器类

    这两天一直忙着前端UI的事,前端布局这块下了很多工夫,很多第三方布局框架如Bootstrap和layUI等虽然很好使用,但是前端你懂的,实际用起来总得缝缝补补,烦啊. 今天就遇到了一个要让div容器内 ...

  9. susmote个人网站博客论坛(TexTec | 关注互联网技术,传播极客精神)

    网站地址 www.susmote.com www.textec.club 欢迎您的访问

  10. 笔记:Spring Cloud Eureka 常用配置及说明

    配置参数 默认值 说明 服务注册中心配置    Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean ...