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 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
如何用python写个模板引擎
2021/01/14 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Delphi软件工程师试题
2013/01/29 面试题
社区庆中秋节活动方案
2014/02/07 职场文书
在校实习生求职信
2014/06/18 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书