详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例


Posted in Javascript onFebruary 17, 2017

Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期、格式化数字精度、语言本地化、格式化货币等等。但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码:

<div ng-app>

  <p>

    <label>Select a date</label>

    <input type="date" id="date" ng-model="datevalue" />

  </p>

  <p> {{ datevalue | date : 'fullDate'}} </p>

</div>

那么问题来了,如果我需要在控制器(controller)的js代码中使用filter来格式化时间/日期,应该怎样处理呢? 直接上代码吧: 视图(view)模板代码:

<div ng-app="dateApp" ng-controller="dateController">

  <p> {{ result }} </p>

</div>

控制器(controller)代码:

var app = angular.module('dateApp', []);

  app.controller(

    'dateController',

    function ($scope, $filter) {

      $scope.result = $filter('date')(new Date(), 'fullDate');

    }

);

以上就是在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间的实现。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自定义函数的多种方法
Jan 09 Javascript
JS制作简单的三级联动
Mar 18 Javascript
理解javascript闭包
Dec 15 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 #Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 #Javascript
jQuery实现弹幕效果
Feb 17 #Javascript
Ajax基础知识详解
Feb 17 #Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 #Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
原生js实现日期计算器功能
Feb 17 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
python如何运行js语句
2020/09/09 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
园林技术个人的自我评价
2014/02/15 职场文书
学术诚信承诺书
2014/05/26 职场文书
党代会心得体会
2014/09/04 职场文书
在职员工证明书
2014/09/19 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL