快捷導(dǎo)航

詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例

更新時(shí)間：2017年02月17日 14:09:52 作者：前端女俠

本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例，有需要的小伙伴可以參考下。

Angularjs內(nèi)置的過(guò)濾器(filter)為我們的數(shù)據(jù)信息格式化提供了比較強(qiáng)大的功能，比如：格式化時(shí)間，日期、格式化數(shù)字精度、語(yǔ)言本地化、格式化貨幣等等。但這些過(guò)濾器一般都是在VIEW中使用的，比如格式化時(shí)間/日期的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>

那么問(wèn)題來(lái)了，如果我需要在控制器(controller)的js代碼中使用filter來(lái)格式化時(shí)間/日期，應(yīng)該怎樣處理呢？直接上代碼吧：視圖(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代碼中使用過(guò)濾器($filter)格式化日期/時(shí)間的實(shí)現(xiàn)。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實(shí)例形式分析了AngularJS自定義指令的實(shí)現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下
2017-06-06
詳解如何將angular-ui的圖片輪播組件封裝成一個(gè)指令
本篇文章主要介紹了如何將angular-ui的圖片輪播組件封裝成一個(gè)指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
angular報(bào)錯(cuò)can't resolve all parameters&nb
這篇文章主要介紹了angular報(bào)錯(cuò)can't resolve all parameters for []的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
這篇文章主要為大家詳細(xì)介紹了仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-07-07
Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的實(shí)例詳解
Angular.js是Google開(kāi)發(fā)的前端技術(shù)框架，最近一直在學(xué)習(xí)Angular.js，通過(guò)對(duì)angular.js的簡(jiǎn)單理解后發(fā)現(xiàn)，angular.js通過(guò)一些簡(jiǎn)單的指令即可實(shí)現(xiàn)對(duì)DOM元素的操作，其特色為雙向數(shù)據(jù)綁定，下面這篇文章給大家詳細(xì)介紹Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的方法，一起來(lái)看看吧。
2016-12-12
AngularJS基礎(chǔ) ng-selected 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-selected 指令,這里對(duì)ng-selected 指令的基礎(chǔ)資料做了詳細(xì)介紹，并附有示例代碼，有需要的小伙伴可以參考下
2016-08-08
用AngularJS的指令實(shí)現(xiàn)tabs切換效果
這篇文章介紹的是寫(xiě)一個(gè)通過(guò)指令嵌套實(shí)現(xiàn)tabs功能的指令模塊，這也是我在一個(gè)項(xiàng)目中應(yīng)用到的，現(xiàn)在分享給大家，有需要的可以參考借鑒。
2016-08-08
AngularJS ng-bind-template 指令詳解
本文注意介紹AngularJS ng-bind-template 指令,這里把相關(guān)資料整理了一下，并附實(shí)例代碼，有需要的小伙伴可以參考下
2016-07-07
angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法，需要的的朋友參考下
2017-01-01