ngModel 포메터 및 파서

ngModel 포메터 및 파서

같은 질문을 다른 형식으로 올렸는데 아무도 대답하지 않았어요.포메터와 파서가 각도 js에서 무엇을 하는지 명확하게 알 수 없습니다.

정의상 포메터와 파서는 모두 나와 비슷해 보입니다.아마 내가 틀렸을지도 몰라, 난 이 angularjs를 처음이야.

포메터의 정의

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

파서 정의

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

간단한 예시로 두 가지 특징을 이해할 수 있도록 도와주세요.둘 다 간단한 일러스트를 주시면 감사하겠습니다.

이 주제는 관련 질문에서 매우 잘 다루어졌습니다.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 시간으로 저장하여 입력 시 로컬 시간으로 표시하는 경우 아래 날짜 선택 지시문과 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.model은 로컬에서 utc 날짜로 변환하기 위해 사용됩니다.

pickadate.picker는 사용되는 날짜 선택 플러그인입니다.

언급URL : https://stackoverflow.com/questions/22841225/ngmodel-formatters-and-parsers