javascript - md-dialog 无法识别 Angular 过滤器

Question

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

这是我的代码。

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

根据您提供的信息，您在使用日期过滤器时遇到的问题是日期对象/字符串的格式不正确，因为其他过滤器可以正常运行。来自 Angular 日期过滤器 documentation :

Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.

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

您可以使用收到的日期并使用 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