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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
react基本安装与测试示例
Apr 27 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python super()方法原理详解
2020/03/31 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
如何使用Python调整图像大小
2020/09/26 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
求职信范文怎么写
2014/01/29 职场文书
少年闰土教学反思
2014/02/22 职场文书
成龙洗发水广告词
2014/03/14 职场文书
李敖北大演讲稿
2014/05/24 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
alibaba seata服务端具体实现
2022/02/24 Java/Android