AngularJS中的过滤器filter用法完全解析


Posted in Javascript onApril 22, 2016

在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示:

{{ name | uppercase }}

AngularJS中的过滤器filter用法完全解析

当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例:

app.controller('DemoController', ['$scope', '$filter', 
 function($scope, $filter) {
 
  $scope.name = $filter('lowercase')('Ari');
}]);

如何传递参数到filter呢?只需要把参数放在filter之后,中间加个冒号(如果有多个参数要传递,在每个参数后加上冒号)比如,数字过滤器可以帮助我们限制数字的位数,如果想显示两位小数,加上number:2就可以了

{{ 123.456789 | number:2 }}

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。

比如,在客户端搜索时,我们可以快速的从数组中过滤出我们想要的结果。

这个filter方法接收一个string,object,或者function参数用来选择/移除数组元素。

下满我们具体来看:

一,内置的过滤器
1,uppercase,lowercase大小转换

{{ "lower cap string" | uppercase }}   //结果:LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果:tank is good

 |这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的2,json格式化

{{ {foo: "bar", baz: 23} | json }}  //结果:{ "foo": "bar", "baz": 23 }

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。

3,date格式化

mysql时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"  

{{ 1304375948024 | date:'medium'}}   //May 03, 2011 06:39:08 PM 
{{ 1304375948024 | date }}             //结果:May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //结果:05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //结果:2011-05-03 06:39:08

 4,number格式化

{{ 1.234567 | number:1 }}  //结果:1.2  
{{ 1234567 | number }}    //结果:1,234,567

 5,currency货币格式化

{{ 250 | currency }}         //结果:$250.00  
{{ 250 | currency:"RMB ¥ " }}    //结果:RMB ¥ 250.00

 6,filter查找 只能查value,不能查key

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
 
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'ip'} }}  //查找name like ip的行 
//上例结果:[{"age":20,"id":10,"name":"iphone"}] 
 
$filter('number')(30000, 2); 
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])

 7,limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }}      //结果:i love 
{{ "i love tank" | limitTo:-4 }}     //结果:tank 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }}   //结果:[{"age":20,"id":10,"name":"iphone"}]

 8,orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根据id升序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:['-age','name'] }}

二,自定filter功能
filter的自定义方式也很简单,使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。

app.filter('过滤器名称',function(){ 
  return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
    //...做一些事情  
    return 处理后的对象; 
  } 
});

我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。
filters.js添加一个module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
});

html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //结果:===== is good

 注意:| lowercase |tankreplace管道命令可以有多个

yourApp.filter('orderObjectBy', function() { 
 return function(items, field, reverse) { 
  var filtered = []; 
  angular.forEach(items, function(item) { 
   filtered.push(item); 
  }); 
  filtered.sort(function (a, b) { 
   return (a[field] > b[field] ? 1 : -1); 
  }); 
  if(reverse) filtered.reverse(); 
  return filtered; 
 }; 
});

该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY,包括字段名后一个布尔值,以指定的顺序是否应该得到扭转。换句话说,假的是升序,真正的下降。html调用

<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>

 
排序搜索

<input type="text" ng-model="search" class="form-control" placeholder="Search"> 
<thead> 
  <tr> 
    <!-- ng-class="{dropup:true}" --> 
    <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 
      产品编号 
      <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 
      产品名称 
      <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 
      产品价格 
      <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> 
    </th> 
  </tr> 
</thead> 
<tbody> 
  <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.price | currency: '¥'}}</td> 
  </tr> 
</tbody>

angularjs

//默认排序字段 
$scope.orderType = 'id'; 
 
$scope.order = '-'; 
 
$scope.changeOrder = function(type) { 
  console.log(type); 
  $scope.orderType = type; 
 
  if ($scope.order === '') { 
    $scope.order = '-'; 
  }else{ 
    $scope.order = ''; 
  } 
}
Javascript 相关文章推荐
popdiv
Jul 14 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
举例讲解如何判断JavaScript中对象的类型
Apr 22 #Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 #Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 #Javascript
jQuery 监控键盘一段时间没输入
Apr 22 #Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
You might like
3
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
关于php开启错误提示的总结
2019/09/24 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
介绍一下木马病毒的种类
2015/07/26 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
导师推荐信范文
2014/05/09 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python