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

根据您提供的信息，您在使用日期过滤器时遇到的问题是日期格式 object/string 格式不正确，因为其他过滤器可以正常运行。来自 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.

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

您可以获取接收到的日期并使用 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 的功能。

希望对您有所帮助！

更新：

如果您需要在一个插值中显示 hours/minutes 而在另一个位置显示 month/day/year，您只需更改日期格式字符串参数 after 仍在将从服务器接收到的日期字符串解析为属性日期毫秒数。此答案中链接的 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 无法识别 angular 过滤器

md-dialog not recognizing angular filter

javascript

angularjs

angularjs-filter

angularjs-material

mddialog