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 ...
随机推荐
- slf4j log4j logback log4j2关系详解和相关用法
来源:slf4j log4j logback关系详解和相关用法https://www.cnblogs.com/Sinte-Beuve/p/5758971.html The Simple Logging ...
- Epplus 设置excel 页边距 及多文件合并
1:使用epplus合并多个excel文件到同一excel的不同sheet页中 private static bool MergeExcel(string _stFilePath, List<s ...
- iOS:CoreData数据库的使用四(数据库和UITableViewController以及NSFetchedResultsController一起使用)
CoreData数据库虽然可以和tableview或者UITableViewController一起使用将数据显示在表格上,但是在准备数据的时候,这种方式需要用一个可变数组来装从数据库一次性取出来的所 ...
- iOS:转载sqlite3
SQLITE3 使用总结 2012-08-21 13:48:28 分类: SQLite/嵌入式数据库 SQLITE3 使用总结 2009-09-16 07:36 2624人阅读 评论(10) 收藏 ...
- 解析Java的JNI编程中的对象引用与内存泄漏问题
JNI,Java Native Interface,是 native code 的编程接口.JNI 使 Java 代码程序可以与 native code 交互——在 Java 程序中调用 native ...
- fonts.conf 中文手册
FONTS-CONF(5) FONTS-CONF(5) 名称 fonts.conf -- 字体配置文件 文件概要 /etc/fonts/fonts.conf /etc/fonts/fonts.dtd ...
- go语言基础之获取命令行参数
1.获取命令行参数 示例: package main //必须 import "fmt" import "os" func main() { list := o ...
- go语言基础之递归函数的调用流程
一.递归函数的调用流程 package main //必须 import "fmt" func test(a int) { if a == 1 { //函数终止调用的条件,非常重要 ...
- Javascript屏蔽鼠标右键-超简单,不过还是记录一下
Javascript屏蔽鼠标右键,其实作用也不大,也许是为了防止别人查看源代码,其实想查看源代码有多种途径,未必需要通过鼠标右键.不过当我们自定义鼠标右键弹出菜单时,也许需要这些. 下面是源码: 1 ...
- Thinkphp学习笔记-模板赋值
如果要在模板中输出变量,必须在在控制器中把变量传递给模板,系统提供了assign方法对模板变量赋值,无论何种变量类型都统一使用assign赋值. $this->assign('name',$va ...