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

时间:2017-09-03 22:00:57

标签: angularjs json angularjs-filter

我从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>

问题在于格式数据。我想在格式日期中看到格式化这个格式: yyyy-MM-dd HH:mm:ss 。结果是一个日期不正确的表:

enter image description here

我怎么能减少.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;

    }

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

检查以下代码:

&#13;
&#13;
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"
        }
    }];

}]);
&#13;
table, th, td {
    border: 1px solid black;
}
&#13;
<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>
&#13;
&#13;
&#13;