AngularJS 过滤器(自带和自建)详解


Posted in Javascript onSeptember 19, 2016

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提
供了方便的途径可以自己创建过滤器。

在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如:{{value|lowercase}}//将值转换成小写

在JavaScript代码中可以通过$filter来调用过滤器

例:

 app.controller(‘DemoController‘, [‘$scope‘, ‘$filter‘,
function($scope, $filter) {

$scope.name = $filter(‘lowercase‘)(‘Ruby‘);

}]);

以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号
即可。如果有多个参数,可以在每个参数后面都加入冒号。

例如

{{0.23145|number:3}}

显示值:0.231//数值过滤器 可以限制小数点后的位数(在过滤器后写上2,将2作为参数传递给过滤器)

可以用|符号作为分割符来同时使用多个过滤器

一:下面介绍AngularJS提供的内置过滤器:

 1.currecy过滤器可以将一个数值格式化为货币格式。用{{ 50| currency }}来将50转化成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,
但是也可以自定义货币符号。

2.date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有

指定使用任何格式,默认会采用mediumDate格式

下面是内置的支持本地化的日期格式:

{{ today | date:‘medium‘ }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:‘short‘ }} <!-- 8/9/1312:09PM -->
{{ today | date:‘fullDate‘ }} <!-- Thursday, August 09, 2013 -->
{{ today | date:‘longDate‘ }} <!-- August 09, 2013 -->
{{ today | date:‘mediumDate‘ }}<!-- Aug 09, 2013 -->
{{ today | date:‘shortDate‘ }} <!-- 8/9/13 -->
{{ today | date:‘mediumTime‘ }}<!-- 12:09:02 PM -->
{{ today | date:‘shortTime‘ }} <!-- 12:09 PM -->

 年份格式化

四位年份:{{ today | date:‘yyyy‘ }} <!-- 2013 -->
两位年份:{{ today | date:‘yy‘ }} <!-- 13 -->
一位年份:{{ today | date:‘y‘ }} <!-- 2013 -->

月份格式化

英文月份:{{ today | date:‘MMMM‘ }} <!-- August -->
英文月份简写:{{ today | date:‘MMM‘ }} <!-- Aug -->
数字月份:{{ today |date:‘MM‘ }} <!-- 08 -->
一年中的第几个月份:{{ today |date:‘M‘ }} <!-- 8 -->

日期格式化

数字日期:{{ today|date:‘dd‘ }} <!-- 09 -->

一个月中的第几天:{{ today | date:‘d‘ }} <!-- 9 -->

英文星期:{{ today | date:‘EEEE‘ }} <!-- Thursday -->
英文星期简写:{{ today | date:‘EEE‘ }} <!-- Thu -->

小时格式化

24小时制数字小时:{{today|date:‘HH‘}} <!--00-->
一天中的第几个小时:{{today|date:‘H‘}} <!--0-->
12小时制数字小时:{{today|date:‘hh‘}} <!--12-->
上午或下午的第几个小时:{{today|date:‘h‘}} <!--12-->

分钟格式化

数字分钟数:{{ today | date:‘mm‘ }} <!-- 09 -->
一个小时中的第几分钟:{{ today | date:‘m‘ }} <!-- 9 -->

秒数格式化

数字秒数:{{ today | date:‘ss‘ }} <!-- 02 -->
一分钟内的第几秒:{{ today | date:‘s‘ }} <!-- 2 -->
毫秒数:{{ today | date:‘.sss‘ }} <!-- .995 -->

字符格式化

上下午标识:{{ today | date:‘a‘ }} <!-- AM -->
四位时区标识:{{ today | date:‘Z‘ }} <!--- 0700 -->

自定义日期格式示例:

{{ today | date:‘MMMd, y‘ }} <!-- Aug9, 2013 -->
{{ today | date:‘EEEE, d, M‘ }} <!-- Thursday, 9, 8-->
{{ today | date:‘hh:mm:ss.sss‘ }} <!-- 12:09:02.995 -->

3.filter

  filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。

  这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

 1)传入的参数是字符串时

    返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素,在参数前加!符号。

   例:

      {{ [‘Bri‘,‘Lerner‘,‘Likes‘,‘To‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}

<!-- ["Lerner","Likes","Eat"] -->

2)传入的参数是对象

   AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较,如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比,可以将$当作键名。

例:

 {{ [{


‘name‘: ‘Ari‘,



‘City‘: ‘San Francisco‘,



‘favorite food‘: ‘Pizza‘


},{



‘name‘: ‘Nate‘,



‘City‘: ‘San Francisco‘,



‘favorite food‘: ‘indian food‘

}] | filter:{‘favorite food‘: ‘Pizza‘} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

3)函数

   对每个元素都执行这个函数,返回非假值的元素会出现在新的数组中并返回。

  自定义函数进行过滤(在这个例子中函数定义在$scope上):

{{ [‘Ari‘,‘likes‘,‘to‘,‘travel‘] | filter:isCapitalized }}

 <!-- ["Ari"] -->
 isCapitalized函数的功能是根据首字母是否为大写返回true或false,具体如下所示:
 $scope.isCapitalized = function(str) {
 return str[0] == str[0].toUpperCase();
 };

4.json

json过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:
{{ {‘name‘: ‘Ari‘, ‘City‘: ‘SanFrancisco‘} | json }}

<!--


{



"name": "Ari",



"City": "San Francisco"


}

-->

5.limitTo

 limitTo过滤器会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取。(如果传入的长度值大于被操作数组或字符串的长度,那么整个数组或字符串都会被返回。)

例子:

{{ San Francisco is very cloudy | limitTo:3 }}

 <!-- San -->

 {{ San Francisco is very cloudy | limitTo:-6 }}

 <!-- cloudy -->

 对数组也可以进行同样的操作。返回数组的第一个元素:

{{ [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘] | limitTo:1 }}

<!-- ["a"] -->

6 lowercase

  lowercase过滤器将字符串转为小写。

7.number

  number过滤器将数字格式化成文本。它的第二个参数是可选的,用来控制小数点后截取的位数。(如果传入了一个非数字字符,会返会空字符串。)

8.orderBy

  orderBy过滤器可以用表达式对指定的数组进行排序。

  orderBy可以接受两个参数,第一个是必需的,第二个是可选的。

  第一个参数是用来确定数组排序方向的谓词。

 下面分情况讨论第一个参数的类型。

函数

当第一个参数是函数时,该函数会被当作待排序对象的getter方法。

字符串

对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升序或降序排列。

数组

在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素,则使用第一个谓词。

 第二个参数用来控制排序的方向(是否逆向)。

  例:

 {{ [{


‘name‘: ‘Ari‘,


‘status‘: ‘awake‘

 },{


‘name‘: ‘Q‘,


‘status‘: ‘sleeping‘

},{


‘name‘: ‘Nate‘,


‘status‘: ‘awake‘

}] | orderBy:‘name‘ }}

<!--


[


{"name":"Ari","status":"awake"},


{"name":"Nate","status":"awake"},


{"name":"Q","status":"sleeping"}


]


-->

 对排序结果进行反转(通过将第二个参数设置为true可以将排序结果进行反转:orderBy:‘name‘:true)

9.uppercase

 uppercase过滤器可以将字符串转换为大写形式:

 二:自定义过滤器

 创建自定义过滤器需要将它放到自己的模块中。

下面举例说明:

 将name以首字母大写形式显示

<!DOCTYPE html>
<html>
<head>
 <title>Custom Filter</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="customFilter" ng-controller="filterController">
 <h1>{{name|lowercase|Capitalize}}</h1>
 <script type="text/javascript" src="customfilter.js"></script>
</body>
</html>

customfilter.js

(function () {
 var app = angular.module(‘customFilter‘, []);
 app.controller(‘filterController‘, function ($scope) {
  $scope.name = ‘JACK‘;
 });
 app.filter(‘Capitalize‘, function () {
  return function (input) {
   if (input) {
    return input[0].toUpperCase() + input.slice(1);
   }
  };
 });
})();

以上就是对AngularJS 过滤器 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 #Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
python九九乘法表的实例
2017/09/26 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python 随机森林算法及其优化详解
2019/07/11 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
经典的班主任推荐信
2013/10/28 职场文书
医德医魂心得体会
2014/09/11 职场文书
党员个人党性分析材料
2014/12/18 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Vue.Draggable实现交换位置
2022/04/07 Vue.js