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 相关文章推荐
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
了解JavaScript中的选择器
May 24 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
举例讲解如何判断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实现邮件群发的源码
2013/06/18 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jQuery操作select的实例代码
2012/06/14 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python 数据加密代码
2008/12/24 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
美发活动策划书
2014/01/14 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js