Angularjs - відображення поточної дати

Я отримав перегляд у angularjs, і я просто намагаюся відобразити поточну дату (відформатовану). Я думав, що щось на кшталт <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>має відображати поточну дату.

Спочатку потрібно створити об’єкт дати у контролері:

контролер:

function Ctrl($scope)
{
    $scope.date = new Date();
}

вид:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

Приклад JSFiddle

Кутовий фільтр фіг

Ви також можете зробити це за допомогою фільтра, якщо вам не потрібно приєднувати об'єкт дати до поточного діапазону кожного разу, коли ви бажаєте надрукувати дату:

.filter('currentdate',['$filter',  function($filter) {
    return function() {
        return $filter('date')(new Date(), 'yyyy-MM-dd');
    };
}])

а потім на ваш погляд:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>

Шаблон

<span date-now="MM/dd/yyyy"></span>

Директива

.directive('dateNow', ['$filter', function($filter) {
  return {
    link: function( $scope, $element, $attrs) {
      $element.text($filter('date')(new Date(), $attrs.dateNow));
    }
  };
}])

Оскільки ви не можете отримати доступ до Dateоб'єкта прямо у шаблоні (для вбудованого рішення), я вибрав цю Директиву. Він також підтримує чисті контролери та їх багаторазове використання.

Ну, ви можете це зробити з виразом вуса ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Вам просто потрібно призначити об’єкту Date область, де ви хочете оцінити цей вираз.

Ось приклад jsfiddle : jsfiddle

Але не сподівайтеся, що воно автоматично оновить значення. Це значення не спостерігається кутовим, тому ви повинні запускати дайджест щоразу, коли ви хочете оновлювати його (наприклад, за інтервал $) ... що є витратою ресурсів (а також не "рекомендовано" в документах). Звичайно, ви можете скористатися комбінацією з директивами / контролерами, щоб возитися лише з дочірньою областю (вона завжди менша, ніж, наприклад, rootScope і дайджест буде швидше).

Тільки мої 2 копійки на випадок, якщо хтось натрапить на це :)

Що я тут пропоную, матиме такий самий результат, що й нинішня відповідь, проте рекомендується писати контролеру так, як я тут згадував.

Прокрутка посилання на першу "Примітку" (Вибачте, вона не має якір)

Ось рекомендований спосіб:

Контролер:

var app = angular.module('myApp', []);   
app.controller( 'MyCtrl', ['$scope', function($scope) {
    $scope.date = new Date();
}]);

Вид:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>

Ви можете використовувати moment()та format()функціонувати в AngularJS.

Контролер:

var app = angular.module('demoApp', []);   
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);

Вид:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>

<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
   var today = new Date();
   console.log($scope.cdate);
   var date = today.getDate();
   var month = today.getMonth();
   var year = today.getFullYear();
   var current_date = date+'/'+month+'/'+year;
   console.log(current_date);
});
</script>

Ось зразок вашої відповіді: http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview

<span>Date Of Birth: {{DateOfBirth | date:"dd-MM-yyyy"}}</span>
<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="DateOfBirth" class="form-control" />

а потім у контролері:

$scope.DateOfBirth = new Date();

Вид

<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>

Контролер

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

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})

Рішення, подібне до рішення @Nick G. за допомогою фільтра, але зробить параметр значимим:

Вкажіть фільтр, relativedateякий називається датою відновлення поточної дати за даним параметром як розл. Як результат, (0 | relativedate)означає сьогодні і (1 | relativedate)означає завтра.

.filter('relativedate', ['$filter', function ($filter) {
  return function (rel, format) {
    let date = new Date();
    date.setDate(date.getDate() + rel);
    return $filter('date')(date, format || 'yyyy-MM-dd')
  };
}]);

і ваш html:

<div ng-app="myApp">
    <div>Yesterday: {{-1 | relativedate}}</div>
    <div>Today: {{0 | relativedate}}</div>
    <div>Tomorrow: {{1 | relativedate}}</div>
</div>

Інший спосіб зробити це: У Controller створіть змінну для зберігання поточної дати, як показано нижче:

var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope) 
{

 $scope.myDate = Date.now();

});

У перегляді HTML,

<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
   <title></title>
   <script src="lib/angular/angular.js"></script>
</head>
<body>
<div ng-controller="EventController">
<span>{{myDate | date : 'yyyy-MM-dd'}}</span>
</div>
</body>
</html>