Question

我正在使用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();
    };

}

Answer 1

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

格式化日期对象，毫秒（字符串或数字）的日期或各种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>

以下是plunker的功能。

希望这有帮助！

<强>更新

如果您需要在一个插值中显示小时/分钟，同时在另一个位置显示月/日/年，您只需要在解析日期字符串后更改日期格式字符串参数正在从服务器接收到一个有效的日期毫秒数量。此答案中链接的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

md-dialog无法识别角度滤波器

1 个答案: