NG 모델 지시자는 애플리케이션 데이터에 HTML 컨트롤의 값 (입력 선택, 텍스트 영역)를 결합한다.
NG 모델 지침
와 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="myAddress" ng-model="text" required>
</form>
»그것을 자신을 시도 ng-model 지시문은 /는 양식 필드의 상태에 따라, 다음과 같은 클래스를 제거 추가합니다 :
- NG-빈
- NG-비어 있지
- NG-감동
- NG-손길이 닿지 않은
- NG-유효
- NG-무효
- NG-더러운
- NG중인
- NG-원시