2016-05-31 177 views
0

我在ng-repeat從這個我想顯示日期作爲三個參數角JS:在角NG-重複

1.Date 2.Month 3.時間

顯示某些數據分割日期和時間參數

我會得到的日期爲一個字符串2016-05-13 16:08:33

<div class="list-expense-menu-item" ng-repeat="notification in notifications"> 
    <h2>{{notification.text}}</h2> 
    <span>Date:{{notification.notif_date}}</span> 
</div> 

預計

<span>Month:05</span> 
<span>Date:16</span> 
<span>Time:16:08</span> 

如何將單個日期分成三個參數?

回答

3

關於它的最好方法是在顯示通知數據之前轉換通知數據。您可以使用正則表達式或僅解析日期,然後使用日期方法。

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .controller('Example', function ($scope) { 
 
    const inputData = [ 
 
     {text: 'some text', notif_date: '2016-05-13 16:08:33'}, 
 
     {text: 'some text', notif_date: '2017-06-13 18:28:33'} 
 
    ]; 
 
    
 
    $scope.notifications = inputData.map(({text, notif_date}) => { 
 
     const regexp = /^\d{4}-(\d{1,2})-(\d{1,2})\s*([\d:]*)$/; 
 
     const matched = notif_date.match(regexp); 
 
     
 
     return { 
 
     text, 
 
     month: matched[1], 
 
     date: matched[2], 
 
     time: matched[3] 
 
     }; 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Example"> 
 
<div class="list-expense-menu-item" ng-repeat="notification in notifications"> 
 
    <h2>{{notification.text}}</h2> 
 
    <span>Month:{{notification.month}}</span> 
 
    <span>Date:{{notification.date}}</span> 
 
    <span>Time:{{notification.time}}</span> 
 
</div> 
 
</div>

例如用日期,COS你的字符串可以通過新的日期很容易地解析()。

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .controller('Example', function ($scope) { 
 
    const inputData = [ 
 
     {text: 'some text', notif_date: '2016-05-13 16:08:33'}, 
 
     {text: 'some text', notif_date: '2017-06-13 18:28:33'} 
 
    ]; 
 
    
 
    $scope.notifications = inputData.map(({text, notif_date}) => { 
 
     const date = new Date(notif_date); 
 
     
 
     return { 
 
     text, 
 
     month: date.getMonth() + 1, //+1 because in JS months are numbered 0 - 11, so January is 0 and so on 
 
     date: date.getDate(), 
 
     time: date.getHours() + ':' + date.getMinutes() 
 
     }; 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Example"> 
 
<div class="list-expense-menu-item" ng-repeat="notification in notifications"> 
 
    <h2>{{notification.text}}</h2> 
 
    <span>Month:{{notification.month}}</span> 
 
    <span>Date:{{notification.date}}</span> 
 
    <span>Time:{{notification.time}}</span> 
 
</div> 
 
</div>

+0

讓我試試:) –

0

在您的控制器修改這樣的notif_date。

notifications.forEach(function(notification){ 
    notification.notif_date = new Date(notification.notif_date); 
}) 

並嘗試角度日期filter在視圖中。

<span>Month:{{notification.notif_date | date:'MM'}}</span> 
    <span>Date:{{notification.notif_date | date:'dd'}}</span> 
    <span>Year:{{notification.notif_date | date:'yyyy'}}</span> 
+0

它沒有工作 –

+0

我假設你正在使用的JavaScript日期()。讓我們試試在控制器 notification.notif_date = new Date(notification.notif_date)並讓我知道它是否有效。 – nutboltu