文档章节

angular ordinalDate过滤器问题

孟飞阳
 孟飞阳
发布于 2017/04/27 13:09
字数 430
阅读 45
收藏 0

先看一下代码:

'use strict';
angular.module('app.filters', []).filter('ordinalDate', ['$filter', function($filter) {
        /**
         * 将给定的天数输出以下格式:d'th',d'st',d'nd',d'rd',
         * 因为按习惯是这样:1st 2nd 3rd 4-20th 21st 22nd 23rd 24-30th 31st
         * @param number
         * @returns {string}
         */      
        var getOrdinalSuffix = function(number) {
            var suffixes = ["'th'", "'st'", "'nd'", "'rd'"];
            var relevantDigits = (number < 30) ? number % 20 : number % 30;
            return "d" + ((relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0]);
        };
        /**
         * /d+((?!\w*(?=')))|d$/g;  这段正则分解以下:
         *(1)/d+ 表示全局从d字符开始匹配。表示的不是数字,而是字符"d",+表示连接符号,如"a"+"b"=“ab”这样
         *(2)?!表示反向匹配,如d可以可以匹配上,而如果是其他字符就匹配不上,
         *(3)?='表示只匹配'开头的,如d'aa',ds就不匹配了./d+(?!\w*(?='))表示只匹配:d其他字符,不匹配:d'其他字符'
         *(4)/g表示全局匹配
         *(5)/d+((?!\w*(?=')))|d$/g;如果匹配上则会输出:d或dd,否则null,匹配类似:[d其他字符] 这样的字符,不匹配:[d'其他字符'] 这种类型
         */
        return function(timestamp, format) {
            var regex = /d+((?!\w*(?=')))|d$/g;//提取d或dd
            var date = new Date(timestamp);
            var dayOfMonth = date.getDate();
            var suffix = getOrdinalSuffix(dayOfMonth);
            if(format != undefined){
                format = format.replace(regex, function (match) {
                    return match === "d" ? suffix : match; //如果提取的结果为d,则返回:d'th'形式,否则输出dd
                });
            }
            return $filter('date')(date, format);
        };
    }]);

这段代码作用就是将给定的时间戳按给定的时间格式输出,以下是几个测试的例子:

{{ 1488181707000 | ordinalDate :"yyyy-MM-dd HH:mm:ss"}}  //输出:2017-02-27 15:48:27

{{ 1488181707000 | ordinalDate :"yyyy-MM-d HH:mm:ss"}}  //输出:2017-02-27th 15:48:27

{{ 1488181707000 | ordinalDate :"yyyy-MM-dUm HH:mm:ss"}}  //输出:2017-02-27thU48 15:48:27

{{ 1488181707000 | ordinalDate :"yyyy-MM-d'Um' HH:mm:ss"}}  //输出:2017-02-27Um 15:48:27

js正则语法:

http://blog.csdn.net/zaifendou/article/details/5746988

http://blog.csdn.net/dihuiqin/article/details/52096549

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 206
博文 964
码字总数 543203
作品 5
朝阳
个人站长
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
5个示例带你学习AngularJS

本文由 伯乐在线 - 蝈蝈 翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。 直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令...

冬瓜1
2013/12/30
0
0
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

驼峰变量名的转换

package com.mmall.test;import java.util.regex.Matcher;import java.util.regex.Pattern;/** * 需求:1. 将字符串 user_name_abc 转换为 userNameAbc * 2. 将字符串 us......

蚂蚁-Declan
26分钟前
3
0
HTTP请求方法

根据HTTP标准,HTTP请求可以使用多种请求方法。 HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。 HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。 序号 方...

踏破铁鞋无觅处
29分钟前
1
0
知识点043-selenium自动化测试网页工具的使用

【摘要】 Selenium是一个主要用于Web应用自动化测试的工具集合。但其作用不仅仅局限于测试领域,还可以用于浏览器行为模拟以及屏幕抓取等,在行业内有着广泛的应用。Selenium支持主流的浏览器...

侠客行之石头
36分钟前
1
0
B250F I219V安装windows server 网卡驱动

https://blog.csdn.net/ryu2003/article/details/50855146

梦想游戏人
36分钟前
1
0
MacOS Install Docker

使用 Homebrew 安装 macOS 我们可以使用 Homebrew 来安装 Docker。 Homebrew 的 Cask 已经支持 Docker for Mac,因此可以很方便的使用 Homebrew Cask 来进行安装: $ brew cask install dock...

Linux就该这么学
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部