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

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

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

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)格式化日期/時間的實現。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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