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 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
js实现掷骰子小游戏
Oct 24 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
微信小程序开发探究
2016/12/27 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python中标准模块importlib详解
2017/04/16 Python
简单实现python收发邮件功能
2018/01/05 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python内置加密模块用法解析
2019/11/25 Python
python调用私有属性的方法总结
2020/07/24 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
宿舍打麻将检讨书
2014/01/24 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
欢迎横幅标语
2014/06/17 职场文书
意向书范本
2014/07/29 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers