Angular JS ngModel : 변형 데이터

Question

'time :'이 (가) '14 : 00 : 00'과 같은 형식의 모델이 있습니다. angle-boostrap의 timepicker를 사용하고 있지만 JS 날짜 객체 또는 ISO datetime 문자열이 필요합니다.

필자가 가장 먼저 생각한 것은 $ parser/$ formatter를 ngModel 컨트롤러에 추가하여 우리가 필요로하는 형식으로 변환하는 방식으로 변환하는 지시문을 작성하는 것이었다. 이것은 출력을 위해 매끄럽게 작동하지만 입력을 위해 작동하지 않습니다. 당신이 바이올린 12시 0분 0초을 열 때 내가 캔 여기 http://jsfiddle.net/HB7LU/1820/

myApp.directive('timespan',function($filter){ 
    var dateFilter = $filter('date'); 
    function parser(data){ 
     return dateFilter(data,'HH:mm:ss'); 
    }; 

    function formatter(data){ 
     var converted = '2000-01-01T' + data + '-06:00'; 
     return converted; 
    }; 

    return { 
     require: 'ngModel', 
     link:function(scope,element,attrs,ctrl){ 
      ctrl.$parsers.unshift(parser); 
      ctrl.$formatters.unshift(formatter); 
     } 
    }; 
}); 

바이올린을했습니다

은 timepicker에 의해 반영되지 않습니다. 콘솔을 보면 ngModel의 형식이 잘못되었다고 불평합니다. 선택 도구로 시간을 변경하면 $ scope.myModel.time이 올바른 형식으로 표시됩니다.

타임 피커에 도달하기 전에 ngModel을 올바른 형식으로 가져 오려면 어떻게해야합니까?

Answer 1

각도 부트 스트랩의 timepicker는 $modelValue이 날짜가 될 것으로 예상합니다 (이 값을 Date() 생성자로 전달한 다음 개체에서 시간과 분을 파싱합니다). $modelValue을 기반으로 자신의 $render() 함수를 작성하므로 형식 작성자가 사용되지 않습니다.

앵귤러 부트 스트랩 코드에서 수술을하지 않고 원하는 것을 얻지 못할지 모르겠습니다. 두 개의 입력 필드 (시간과 분)가있는 컨트롤러를 작성하는 것이 더 쉽습니다.

Answer 2

가능한 해결책은 모델 값 입력에 대한 지시문을 만드는 것입니다. 이 지시문은 이 timepicker - timestamp 또는 Date 객체와 동일한 형식으로 날짜를 받고 원하는 방식으로 표시합니다.

Answer 3

timepicker는 render 메소드에서 $ viewValue를 사용해야한다고 생각합니다. 그러므로 가장 좋은 해결책은 앵글 부트 스트랩 코드에 대한 수술입니다.

render function에서 $ modelValue를 $ viewValue로 변경하십시오.