Question

来自jQuery / PHP背景，我通常使用静态方法来执行此操作，该方法接受输入并将其格式化返回。

使用此日期：2014-09-27 03:15:42

如何在AngularJS中将此格式设为显示Sept 27, 2014又称中期日期？

https://docs.angularjs.org/api/ng/filter/date我已经阅读了这些文档。但似乎只需要时间戳。

最佳做法是什么？

带有日期时间的Angular代码：

<tr ng-repeat="transaction in transactions | filter:search">
    <td>{{transaction.created_at}}</td>
    <td>You {{transaction.type}} to {{transaction.to_id}}</td>
    <td>{{transaction.amount}}</td>
</tr>

我试图格式化transaction.created_at

Answer 1

您应该创建一个自定义过滤器，将其转换为日期对象，然后使用日期，这样一旦完成，您将最终得到{{transaction.created_at | convertToDate |日期：'yyyy-MM-dd HH：mm：ss Z'}}例如

请参阅http://jsfiddle.net/HB7LU/6743/

myApp.filter('convertToDate', function() {
    return function(str){
        return new Date(str);
    };
});

Answer 2

有两种方法可以实现这一目标：

<强> DEMO

[ 1 ]使用 $filter 服务隐式转换控制器内的指定日期。

的 JAVASCRIPT

.controller('Ctrl', function($scope, $filter) {
    $scope.mediumDate = $filter('date')(new Date('2014-09-27 03:15:42'), 'mediumDate');
})

HTML 的

This is set in the controller: {{mediumDate}}

[ 2 ]使用自定义服务将给定的字符串日期格式转换为日期对象，然后使用 date filter 来实现中日期格式。

的 JAVASCRIPT

.filter('toDate', function() {
    return function(stringDate) {
        return new Date(stringDate);
    };
});

HTML 的

This is set on the view: {{'2014-09-27 03:15:42' | toDate | date: 'mediumDate'}}

Answer 3

检索交易时，我会创建一个字段created_at_timestamp，因为此交易日期不会超时。通过这种方式，我可以重复使用它，而无需在每次要使用它时将其转换为Date对象。

这个逻辑应该远离控制器，所以我会把它放在服务中。这样的事情：

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

app.factory('TransactionsService', function() {
  // fetched transactions
  var transactions = [
    {
      created_at: '2014-09-27 03:15:42',
      type: 'someType',
      to_id: 'x',
      amount: 20 
    },
  {
      created_at: '2013-02-15 14:41:02',
      type: 'someType2',
      to_id: 'y',
      amount: 30 
    }
  ];

  var get = function () {
    return transactions.map(function (v) {
      v.created_at_timestamp = new Date(v.created_at);
      return v;
    });
  };

  return {
    get: get
  };
});

app.controller('SomeController', function ($scope, TransactionsService) {
    $scope.transactions = TransactionsService.get();
});

您的视图表达式也显示日期：

{{transaction.created_at_timestamp | date }}

See this working demo

角度格式Y-m-d H：i：s

3 个答案: