現在の日付を表示するAngularJS

Question

ユーザーが自分のページに移動して、現在の日付を自分のhtmlにデフォルト値として表示したい場合は、その値を設定します。

これは、選択日付ピッカーのための私のhtmlです：

 <div class="row"> 
    <div class="col-lg-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       {{card}} 
      </div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <p>{{DatePickerCtrl.chosenStartDate | date : 'longDate'}} - {{DatePickerCtrl.chosenEndDate | date : 'longDate'}}</p> 
        </div> 
       </div> 
       <ng-include></ng-include> 
      </div> 
      <a href ng-click="footerLinkClicked()"> 
       <div class="panel-footer"> 
        <span class="pull-left">Select Date</span> 
        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
        <div class="clearfix"></div> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

これは私の日付ピッカーに対応する私のコントローラである：私はページを入力したときに

angular.module('App').directive('datePicker', function($mdDialog, $rootScope, $filter) { 
    return { 
     restrict: 'E', 
     templateUrl: 'components/date-picker-select/date-picker-select.html', 
     scope: { 
      card: '=' 
     }, 
     controller: function($scope) { 
      var self = this; 
      $rootScope.$on("dateWasChosen", function() { 
       self.chosenStartDate = JSON.parse(localStorage.getItem('chosenStartDate')); 
       self.chosenEndDate = JSON.parse(localStorage.getItem('chosenEndDate')); 
      }); 
      $scope.footerLinkClicked = function() { 
       $mdDialog.show({ 
        controller: datePickerController, 
        templateUrl: 'components/date-picker-select/date-picker-modal.html', 
        parent: angular.element(document.body), 
        clickOutsideToClose: true 
       }).then(function(answer) { 
        console.log("Fff"); 
       }, function() {}); 
      } 
     }, 

     controllerAs: 'DatePickerCtrl' 
    } 
}) 
function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter) { 
    console.log("suntem in date picker sel"); 
    $scope.startDateL = new Date(); 
    $scope.endDateL = new Date(); 
    $scope.close = function() { 
     $mdDialog.hide(); 
     console.log("closing"); 
    } 
    $scope.setDate = function(startDate, endDate) { 
     $rootScope.startDate = $scope.startDateL; 
     $rootScope.endDate = $scope.endDateL; 
     var stDate = $filter('date')($rootScope.startDate, 'yyyy-MM-dd'); 
     var enDate = $filter('date')($rootScope.endDate, 'yyyy-MM-dd'); 
     console.log(stDate); 
     console.log(enDate); 
     datePickerFactory.save({ 
      sDate: stDate, 
      eDate: enDate 
     }, function() {}) 

     localStorage.setItem('chosenStartDate', JSON.stringify($rootScope.startDate)); 
     localStorage.setItem('chosenEndDate', JSON.stringify($rootScope.endDate)); 
     $rootScope.$broadcast("dateWasChosen"); 
     $mdDialog.hide(); 
    } 
} 

私は今日の日付を表示したいです。

ありがとうございます！

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

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="Ctrl"> 
 
    {{date | date:'yyyy-MM-dd'}} 
 
</div>

と道あなたにフォーマット：

Answer 1

単にあなたのテンプレートでは、その後、コントローラに最初

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

を日付オブジェクトを作成するには、ような何かを欲しいです。

Answer 2

この式を評価する範囲にDate objectを割り当てる必要があります。