快捷導(dǎo)航

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

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

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

Angularjs內(nèi)置的過濾器(filter)為我們的數(shù)據(jù)信息格式化提供了比較強大的功能，比如：格式化時間，日期、格式化數(shù)字精度、語言本地化、格式化貨幣等等。但這些過濾器一般都是在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來格式化時間/日期，應(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代碼中使用過濾器($filter)格式化日期/時間的實現(xiàn)。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angularjs單選框相關(guān)的示例代碼
本篇文章主要介紹了Angularjs單選框相關(guān)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
angular 實時監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實時監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS中的緩存使用
一個緩存就是一個組件，它可以透明地儲存數(shù)據(jù)，以便以后可以更快地服務(wù)于請求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。
2017-01-01
AngularJS基礎(chǔ) ng-csp 指令詳解
本文主要介紹AngularJS ng-csp 指令,這里對ng-csp 的基礎(chǔ)資料的整理,并附代碼實例和實現(xiàn)效果圖,有需要的小伙伴參考下
2016-08-08
Angular(5.2->6.1)升級小結(jié)
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級小結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-12-12
Angular-Ui-Router+ocLazyLoad動態(tài)加載腳本示例
本篇文章主要介紹了Angular-Ui-Router+ocLazyLoad動態(tài)加載腳本示例，可以提高加載速度，使用戶體驗更好，有興趣的可以了解一下。
2017-03-03
詳解Angularjs filter過濾器
這篇文章主要介紹了angularjs filter過濾器的相關(guān)資料,需要的朋友可以參考下
2016-02-02
angular中radio單選的問題解決demo
這篇文章主要為大家介紹了angular中radio單選的問題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
將angular-ui的分頁組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會對大家的學(xué)習(xí)或者工作覺有一定的參考價值，需要的朋友下面來一起看看吧。
2017-05-05
AngularJS中使用HTML5手機攝像頭拍照
這篇文章主要介紹了AngularJS中使用HTML5手機攝像頭拍照的相關(guān)資料,需要的朋友可以參考下
2016-02-02