웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
angularjs에서 ngModel디렉티브에 옵션으로 ngModelOptions 사용하는 방법들
Last Modified : 2018-01-01 / Created : 2017-04-27angularjs에서 ngModel 디렉티브에 옵션으로 사용하는 ngModelOptions 속성의 사용에 대하여 알아봅니다.
이 옵션을 사용하는 가장 큰 이유중 하나로 debouce 옵션을 설정하여 입력완료에 대하여 지연시간 설정이 가능합니다.
ng-model-options="{updateOn: 'default blur', debounce: { default: 300, blur: 300 }}"
위와 같이 복수개의 updateOn 및 debounce 값을 설정 가능합니다. 만약 아래와 같이 html이 있는 경우 위 옵션을 추가하여 아래처럼 나타낼 수 있을 것입니다.
@ ng_model_option.html
참고로, ng-model-options는 반드시 ng-model 디렉티브가 선언되어야 동작합니다. 여기까지 ngModelOption 디렉티브에 대하여 알아보았습니다.
이 옵션을 사용하는 가장 큰 이유중 하나로 debouce 옵션을 설정하여 입력완료에 대하여 지연시간 설정이 가능합니다.
# ngModelOptions 를 사용한 모델값에 옵션 추가하기
아래는 간단한 예제입니다. 지연시간이 300 ms로 설정되어 입력이 끝난 후 300ms 동안 아무 입력이 없어야 이벤트 등이 실행되게됩니다.ng-model-options="{updateOn: 'default blur', debounce: { default: 300, blur: 300 }}"
위와 같이 복수개의 updateOn 및 debounce 값을 설정 가능합니다. 만약 아래와 같이 html이 있는 경우 위 옵션을 추가하여 아래처럼 나타낼 수 있을 것입니다.
@ ng_model_option.html
<span>제목을 입력하세요!</span>
<input type="text" ng-change="doSomething();" ng-model="title" ng-model-option="{updateOn: 'default blur', debounce: { default: 300, blur: 300 }}" />
<input type="text" ng-change="doSomething();" ng-model="title" ng-model-option="{updateOn: 'default blur', debounce: { default: 300, blur: 300 }}" />
참고로, ng-model-options는 반드시 ng-model 디렉티브가 선언되어야 동작합니다. 여기까지 ngModelOption 디렉티브에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
