angularjs 构建主页 内置过滤器、日期的格式化
从构建负责管理主屏幕的 MainController 开始。在这个 MainController 控制器内,只需设
置一个每秒运转一次,同时更新一个局部作用域变量的延时
angular.module('myApp', [])
.controller('MainController', function($scope, $timeout) {
// 构建date对象
$scope.date = {};
// 更新函数
var updateTime = function() {
$scope.date.raw = new Date();
$timeout(updateTime, 1000);
};
// 启动更新函数
updateTime();
});
angular.module('myApp', [])
.controller('MainController', function($scope, $timeout) {
// 构建date对象
$scope.date = {};
// 更新函数
var updateTime = function() {
$scope.date.raw = new Date();
$timeout(updateTime, 1000);
};
// 启动更新函数
updateTime();
});
MainController 内的 updateTime() 函数每秒都会运行,以便更新 $scope.date.raw 时间戳,
同时更新视图
<div class="container">
<div ng-controller="MainController">
{{ date.raw }}
</div>
</div>
目前,浏览器中的这个日期还非常丑陋。我们可以利用Angular内置的过滤器以更优雅的方
式来格式化这个日期。
<div class="container">
<div ng-controller="MainController">
<div id="datetime">
<h1>{{ date.raw | date:'hh mm ss' }}</h1>
</div>
</div>
</div>
你可以在视图中添加另一个日期,以人性化的方式来显示当前日期。只要再添加一个格式化
的日期就可以了:
<!-- ... -->
<div id="datetime">
<h1>{{ date.raw | date: 'hh mm ss' }}</h1>
<h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2>
</div>
<!-- ... -->
angularjs 构建主页 内置过滤器、日期的格式化的更多相关文章
- AngularJS提供的内置过滤器
1. currencycurrecy过滤器可以将一个数值格式化为货币格式.用{{ 123 | currency }}来将123转化成货币格式.currecy过滤器允许我们自己设置货币符号.默认情况下会 ...
- AngularJS复习-----内置过滤器和内置服务
AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...
- apache shiro内置过滤器 标签 注解
内置过滤器 anon(匿名) org.apache.shiro.web.filter.authc.AnonymousFilter authc(身份验证) org.apache.shiro ...
- Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档
前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...
- Asp.Net Core MVC框架内置过滤器
第一部分.MVC框架内置过滤器 下图展示了Asp.Net Core MVC框架默认实现的过滤器的执行顺序: Authorization Filters:身份验证过滤器,处在整个过滤器通道的最顶层.对应 ...
- Shiro内置过滤器
Shiro内置过滤器 DefaultFilter 枚举类定义了shiro所有的默认过滤器. package org.apache.shiro.web.filter.mgt; public enum D ...
- angularjs开发常见问题-2(angularjs内置过滤器)
在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...
- AngularJS 的那些内置九种过滤器
ng内置了九种过滤 1. currency (货币处理) 使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币: {{num | currency : ...
- 009-spring cloud gateway-过滤器GatewayFilter、GlobalFilter、GatewayFilterChain、作用、生命周期、GatewayFilterFactory内置过滤器
一.概述 在Spring-Cloud-Gateway之请求处理流程中最终网关是将请求交给过滤器链表进行处理. 核心接口:GatewayFilter,GlobalFilter,GatewayFilter ...
随机推荐
- MySQL: tinyint(1) 和 tinyint(4), char 和varchar
1.BIT[M] 位字段类型,M表示每个值的位数,范围从1到64,如果M被忽略,默认为1 2.TINYINT[(M)] [UNSIGNED] [ZEROFILL] M默认为4,占1个字节 很小的整数 ...
- Android宝典入门篇-进阶
学习Android前后有快有1个月了,本着不耍流氓,谈恋爱就要结婚的信念(其实AD开发也挺有趣的),做了自己的第一个Android小应用.本来准备今天和大家分享的,考虑到在不同屏幕上的效果没测试和本着 ...
- 详解 QT 源码之 Qt 事件机制原理
QT 源码之 Qt 事件机制原理是本文要介绍的内容,在用Qt写Gui程序的时候,在main函数里面最后依据都是app.exec();很多书上对这句的解释是,使 Qt 程序进入消息循环.下面我们就到ex ...
- 如何快速把安卓应用移植到BlackBerry 10上
如何快速把安卓应用移植到BlackBerry 10上 相关博客: BlackBerry相关文档 http://developer.blackberry.com/android/documentatio ...
- CSS_LESS 语法/函数详解
嵌套规则 01 #header { color: black; }#header .navigation { font-size: 12px; 02 }#header .logo { 03 w ...
- Nicescroll滚动条插件的用法
Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...
- Quartz学习笔记
:30发送email通知客户最新的业务情况. java.util.Timer和java.util.TimerTask Timer和TimerTask是能够完毕job schedule的两个jdk ...
- php 单进程SAPI生命周期
php的生命周期3.1 STARTUP 1.初始化引擎和核心组件. 2.解析php.ini. 3.初始化静态构建的模块(MINIT). 4.初始化共享模块(MINIT).3.2 ...
- ownCloud 的六大神奇用法
ownCloud 是一个自行托管的开源文件同步和共享服务器.就像“行业老大” Dropbox.Google Drive.Box 和其他的同类服务一样,ownCloud 也可以让你访问自己的文件.日历. ...
- Git使用sublime_text作用默认编辑器
Git使用的是Vim来作用默认的编辑器,但一直都用不好这个编辑器,所以打算把他换成sublime_text 使用windows默认的记事本 git config --global core.edito ...