从 json 数组格式化 AngularJS ng-repeat 指令中的日期

Question

我正在从 laravel 应用程序中获取 json 格式的响应，如下所示：

[{"id":11,"name":"test","description":"adddas","isDone":false,"created_at":{"date":"2017-09-06 12:23:23.000000","timezone_type":3,"timezone":"UTC"}},{"id":12,"name":"test2","description":"asdasdsa","isDone":false,"created_at":{"date":"2017-09-13 06:23:22.000000","timezone_type":3,"timezone":"UTC"}},{"id":13,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 18:44:57.000000","timezone_type":3,"timezone":"UTC"}},{"id":14,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:23:58.000000","timezone_type":3,"timezone":"UTC"}},{"id":15,"name":"task12321","description":"jakis tam testowy task","isDone":false,"created_at":{"date":"2017-09-03 20:45:35.000000","timezone_type":3,"timezone":"UTC"}}]

我正在尝试在 ng-repeat 指令中的 Angular js 中格式化这些数据，如下所示：

<div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>name</th>
                <th>Created at</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="task in tasks">
                <td>{{task.name}}</td>
                <td>{{ task.created_at.date | date:'yyyy-MM-dd HH:mm:ss' }}</td>
            </tr>
            </tbody>
        </table>
    </div>

问题出在格式数据上。我想按照上面的格式 date:yyyy-MM-dd HH:mm:ss 对其进行格式化。结果是日期不正确的 table：

如何减少 .000000，例如 2017-09-06 12:23:23.000000？过滤器根本不起作用。我不知道为什么。我将不胜感激。

我通过 Doctrine 查询从数据库中获取数据的方式如下：

public function getTasks(){


        $results = $this->entityManager->createQueryBuilder()
            ->select('t')->from('\TodoList\Http\Entities\Task', 't')
            ->getQuery()->getArrayResult();
       true);
      return $results;

    }

Answer 1

将日期传递为 "date": "2017-09-06T12:23:23.000000" 而不是 "date":"2017-09-06 12:23:23.000000"

检查以下代码：

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Hello world';
    $scope.tasks = [{
        "id": 11,
        "name": "test",
        "description": "adddas",
        "isDone": false,
        "created_at": {
            "date": "2017-09-06T12:23:23.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 12,
        "name": "test2",
        "description": "asdasdsa",
        "isDone": false,
        "created_at": {
            "date": "2017-09-13T06:23:22.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 13,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T18:44:57.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 14,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T20:23:58.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }, {
        "id": 15,
        "name": "task12321",
        "description": "jakis tam testowy task",
        "isDone": false,
        "created_at": {
            "date": "2017-09-03T20:45:35.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        }
    }];

}]);

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller='MyController' ng-app="myApp">
    <div>{{title}}</div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>name</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in tasks">
                    <td>{{task.name}}</td>
                    <td>{{ task.created_at.date | date : "yyyy-MM-dd h:mm:ss"}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Answer 2

将此功能添加到您的控制器

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

并像下面的代码那样更改您的视图

<tr ng-repeat="task in tasks">
            <td>{{task.name}}</td>
            <td>
            {{ ToDate(task.created_at.date) | date:'yyyy-MM-dd HH:mm:ss' }}
            </td>
</tr>

从 json 数组格式化 AngularJS ng-repeat 指令中的日期

Formating dates in AngularJS ng-repeat directive from json array

angularjs

json

angularjs-filter