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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
举例讲解如何判断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
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
python 基于opencv操作摄像头
2020/12/24 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
2014年中秋寄语
2014/08/11 职场文书
春游踏青活动方案
2014/08/14 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android