3

我正在使用 Angular Material 的 md-dialog 功能，但在使日期过滤器正常工作时遇到了一些问题。也许有人可以发现它并让我知道他们是否对如何进行这项工作有任何想法。我可以看到 {{item.presentation.end_time}} 和 {{confSessionObj.session_nr}} 正在工作，但是当我放置角度日期过滤器时，它无法识别它。

这是我的代码。

JS

$scope.showAdvanced = function(ev, confSession) {
    var sessionID = confSession.id;
    $.ajax({
        type: "GET",
        url: "/session-detail.php",
        data: {id: sessionID},
        success: function(data, response){
            data = data.replace(/\\n/g, "\\n")
                .replace(/\\'/g, "\\'")
                .replace(/\\"/g, '\\"')
                .replace(/\\&/g, "\\&")
                .replace(/\\r/g, "\\r")
                .replace(/\\t/g, "\\t")
                .replace(/\\b/g, "\\b")
                .replace(/\\f/g, "\\f");
            $scope.returnedObj = JSON.parse(data);

            $mdDialog.show({
                locals: { confSessionObj: confSession, returnedObj: $scope.returnedObj },
                controller: DialogController,
                targetEvent: ev,
                template:
                    '<div class="md-dialog-container">' +
                    '<md-dialog aria-label="Session Detail">' +
                    '<form ng-cloak>' +
                    '<md-toolbar md-scroll-shrink>'+
                    '<div class="md-toolbar-tools">'+
                    '<h4 style="color: #fff;">Session Details</h4>'+
                    '</div>'+
                    '</md-toolbar>'+
                    '<md-dialog-content>'+
                    '<md-list-item>'+
                    '<div class="md-dialog-content"  id="dialog">'+
                    '<p class="md-body-2"><span class="md-custom-title">Session Title:</span>  {{confSessionObj.session_nr}} - {{confSessionObj.session_name}}</p>'+
                    '<table class="table table-bordered table-striped table-hover table-responsive" id="dialogtable">'+
                    '<tr id="theader">'+
                    '<thead>'+
                    '<th>Talk Title</th>'+
                    '<th>Start Time</th>'+
                    '<th>End Time</th>'+
                    '<th>Speaker Name</th>'+
                    '</thead>'+
                    '</tr>'+
                    '<tr ng-repeat="item in returnedObj">'+
                    '<td>{{item.presentation.title}}</td>'+
                    '<td>{{item.presentation.start_time | date: "MM/dd/yyyy  h:mma"}}</td>'+
                    '<td>{{item.presentation.end_time | date: "MM/dd/yyyy h:mma"}}</td>'+
                    '<td>{{item.speakers.firstname}}&nbsp;&nbsp;{{item.speakers.lastname}}</td>'+
                    '</tr>'+
                    '</table>'+
                    '</div>'+
                    '</md-list-item>'+
                    '</md-dialog-content>'+
                    '<md-dialog-actions layout="row">'+    
                    '<md-button class="md-raised" ng-click="cancel()">Close</md-button>'    +
                    '</md-dialog-actions>'+
                    '</form>'+
                    '</md-dialog>'+
                    '</div>',
                parent: angular.element(document.body),
                preserveScope: true,
                clickOutsideToClose:true,
                fullscreen: $scope.customFullscreen
            });
        },
        error: function(e){
            console.log(e.message);
        }
    });
};
function DialogController($scope, $mdDialog, confSessionObj, returnedObj) {
    $scope.confSessionObj = confSessionObj;
    $scope.returnedObj = returnedObj;

    $scope.cancel = function() {
        $mdDialog.cancel();
    };

}
4

1 回答 1

1

根据您提供的信息，您在使用日期过滤器时遇到的问题是日期对象/字符串的格式不正确，因为其他过滤器正在成功运行。从角度日期过滤器文档：

将日期格式化为 Date 对象、毫秒（字符串或数字）或各种 ISO 8601 日期时间字符串格式（例如 yyyy-MM-ddTHH:mm:ss.sssZ 及其较短的版本，如 yyyy-MM-ddTHH:mmZ、yyyy-MM -dd 或 yyyyMMddTHHmmssZ）。如果在字符串输入中未指定时区，则时间被认为是本地时区。

您需要使用其中一种格式的日期，以确保可以有效地处理它。我建议使用毫秒，因为日期过滤器可以以字符串或数字的形式处理它，从而提供更多的灵活性。

您可以获取接收到的日期并使用Date.Parse()来获取毫秒，然后可以将其传递到带有日期过滤器的插值中。

JS：

$scope.parseDate = function(date) {
    return Date.parse(date);
}

HTML：

<td>{{ parseDate(item.presentation.end_time) | date: "MM/dd/yyyy h:mma" }}</td>

这是该功能的工作原理。

希望这会有所帮助！

更新：

如果您需要在一个插值中显示小时/分钟，同时在另一个位置显示月/日/年，您只需要在仍将从服务器接收到的日期字符串解析为属性 Date 毫秒后更改日期格式字符串参数数量。此答案中链接的 plunker 已更新所有可能的日期格式变体，包括您在评论中指定的日期格式以及军事和 12 小时格式的时间。

<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy h:mma' }}</td> // 05/24/2017 1:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy H:mma' }}</td> // 05/24/2017 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'H:mma' }}</td> // 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'HH:mma' }}</td> // 13:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'h:mma' }}</td> // 1:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'hh:mma' }}</td> // 01:10PM
<td>{{ parseDate('2017-05-24 13:10') | date: 'MM/dd/yyyy' }}</td> // 05/24/2017
于 2017-02-01T19:51:17.207 回答