javascript - Angular js :split date and time parameters in angular ng-repeat

Question

我正在 ng-repeat 中显示一些数据，我想将日期显示为三个参数

1.日期2个月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>

如何将单个日期拆分为三个参数？

Answer 1

最好的方法是在显示通知数据之前对其进行转换。您可以使用正则表达式，或者只解析日期，然后使用日期方法。

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>

以日期为例，因为您的字符串可以通过 new Date() 轻松解析。

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>