[angularjs] ngModel 포맷터 및 파서

Program / 글쓴이

같은 질문을 다른 형태로 게시했지만 아무도 대답하지 않았습니다. 포매터와 파서가 각도 js에서 수행하는 작업에 대한 명확한 그림을 얻지 못했습니다.

정의에 따르면 Formatters와 Parser는 모두 나와 비슷합니다. 이 angularjs를 처음 접했기 때문에 내가 틀렸을 수도 있습니다.

포맷터 정의

모델 값이 변경 될 때마다 파이프 라인으로 실행할 함수 배열입니다. 차례로 각 함수가 호출되어 값을 다음으로 전달합니다. 컨트롤 및 유효성 검사에 표시 할 값을 형식화 / 변환하는 데 사용됩니다.

파서 정의

컨트롤이 DOM에서 값을 읽을 때마다 파이프 라인으로 실행할 함수 배열입니다. 차례로 각 함수가 호출되어 값을 다음으로 전달합니다. 값 및 유효성 검사를 삭제 / 변환하는 데 사용됩니다. 유효성 검사를 위해 파서는 $ setValidity ()를 사용하여 유효성 상태를 업데이트하고 잘못된 값에 대해 undefined를 반환해야합니다.

간단한 예를 들어 두 기능을 이해하도록 도와주세요. 둘 다에 대한 간단한 설명을 주시면 감사하겠습니다.

답변

이 주제는 관련 질문에서 정말 잘 다루었 습니다. AngularJS에서 양방향 필터링을 수행하는 방법?

요약:

  • 포맷터는 모델 값이 뷰에 표시되는 방식을 변경합니다.
  • 파서는 뷰 값이 모델에 저장되는 방식을 변경합니다.

다음은 NgModelController api 문서 의 예제를 기반으로하는 간단한 예제입니다 .

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

당신은 그것을 실제로 볼 수 있습니다 : http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />

(모델보기)에 이름을 입력하면 모델이 항상 소문자임을 알 수 있습니다. 그러나 버튼을 클릭하고 프로그래밍 방식으로 이름 (보려는 모델)을 변경하면 입력 필드는 항상 대문자입니다.

답변

포맷터와 파서의 또 다른 사용법은 날짜를 UTC 시간으로 저장하고 입력시 현지 시간으로 표시하려는 경우 아래 datepicker 지시문과 utcToLocal 필터를 만들었습니다.

(function () {
    'use strict';

    angular
        .module('app')
        .directive('datepicker', Directive);

    function Directive($filter) {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                element.addClass('datepicker');
                element.pickadate({ format: 'dd/mm/yyyy', editable: true });

                // convert utc date to local for display
                ngModel.$formatters.push(function (utcDate) {
                    if (!utcDate)
                        return;

                    return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy');
                });

                // convert local date to utc for storage
                ngModel.$parsers.push(function (localDate) {
                    if (!localDate)
                        return;

                    return moment(localDate, 'DD/MM/YYYY').utc().toISOString();
                });
            }
        };
    }
})();

이 utcToLocal 필터를 사용하여 입력 날짜가 현지 시간으로 변환하기 전에 올바른 형식인지 확인합니다.

(function () {
    'use strict';

    angular
        .module('app')
        .filter('utcToLocal', Filter);

    function Filter($filter) {
        return function (utcDateString, format) {
            if (!utcDateString) {
                return;
            }

            // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified
            if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
                utcDateString += 'Z';
            }

            return $filter('date')(utcDateString, format);
        };
    }
})();

moment.js 는 현지 날짜를 utc 날짜로 변환하는 데 사용됩니다.

pickadate.js 는 사용되는 datepicker 플러그인입니다.

답변