AngularJS 모델 지시문
ng-model 지시문은 HTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인딩합니다.
모델링 지침
지시문을 사용하면 ng-model입력 필드의 값을 AngularJS에서 생성된 변수에 바인딩할 수 있습니다.
예시
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
양방향 바인딩
바인딩은 양방향으로 진행됩니다. 사용자가 입력 필드 내에서 값을 변경하면 AngularJS 속성도 값을 변경합니다.
예시
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
사용자 입력 확인
지시문 은 ng-model애플리케이션 데이터(번호, 이메일, 필수)에 대한 유형 검증을 제공할 수 있습니다.
예시
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
위의 예에서 범위는 ng-show속성의 표현식이 를 반환 하는 경우에만 표시됩니다 true.
속성의 ng-model속성이 존재하지 않으면 AngularJS가 속성을 생성합니다.
신청현황
지시문 은 ng-model애플리케이션 데이터에 대한 상태(유효, 더티, 터치, 오류)를 제공할 수 있습니다.
예시
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS 클래스
이 ng-model지시문은 상태에 따라 HTML 요소에 대한 CSS 클래스를 제공합니다.
예시
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
이 ng-model지시문은 양식 필드의 상태에 따라 다음 클래스를 추가/제거합니다.
- 비어 있는
- 비어있지 않은
- 감동의
- 손대지 않은
- 유효하지 않은
- 유효하지 않은
- 더러운
- ng-pending
- 깨끗한