2016-05-31 140 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