각도 다이얼로그가 각도 필터를 인식하지 못합니다.

Question

각도 재질의 md 대화 상자 기능을 사용하고 있지만 날짜 필터가 작동하는 데 문제가 있습니다. 어쩌면 누군가가 그것을 발견하고 그들이이 작업을하는 방법에 대한 아이디어가 있다면 알려주지 않을 수 있습니다. {{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에서 :

날짜 형식으로 하나 Date 객체, 밀리 초 (문자열이나 숫자) 또는 다양한 ISO 8601 날짜 문자열 형식 (예 : YYYY-MM ISO 형식으로 : 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