예
데이터 바인딩과 입력 필드 :
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
»그것을 자신을 시도 정의 및 사용
AngularJS와는 기본 동작 수정 <input> 요소이지만에만 ng-model 속성이 존재한다.
그들은이 AngularJS와 모델의 일부이며 AngularJS와 기능에서 상기 DOM 모두에서 언급 한 업데이트 될 수 있음을 의미하는, 데이터 바인딩 제공한다.
그들은 유효성 검사를 제공합니다. 예 : <input> A의 요소 required 속성은이 $valid 로 설정 상태를 false 으로 그것이 비어로합니다.
또한 국가 통제를 제공한다. AngularJS와 모든 입력 요소들의 현재 상태를 유지한다.
입력 필드는 다음과 같은 상태를 가지고 :
-
$untouched분야는 아직 접촉되지 않았습니다 -
$touched필드 터치 한 -
$pristine분야는 아직 수정되지 않았습니다 -
$dirty필드가 수정되었습니다 -
$invalid필드의 내용이 유효하지 않습니다 -
$valid필드 내용이 유효
각 상태의 값은 부울 값을 나타내고, 중 하나입니다 true 또는 false .
통사론
<input ng-model=" name "> 입력 요소의 값을 사용하여 언급되는 ng-model 특성.
CSS 클래스
<input> AngularJS와 응용 프로그램 내부의 요소는 특정 클래스 주어진다. 이러한 클래스는 그 상태에 따라, 입력 요소의 스타일을 위해 사용될 수있다.
다음 클래스가 추가됩니다
-
ng-untouched필드가 아직 접촉되지 않았습니다 -
ng-touched필드 터치 한 -
ng-pristine분야는 아직 수정되지 않았습니다 -
ng-dirty필드가 수정되었습니다 -
ng-valid필드 내용이 유효 -
ng-invalid필드의 내용이 유효하지 않습니다 -
ng-valid- key각각의 검증을위한 하나의 키를. 예 :ng-valid-required유용한 하나 이상의 일이있을 때 확인해야하는 -
ng-invalid- key예 :ng-invalid-required
이 나타내는 값이면 클래스는 제거 false .
예
표준 CSS를 사용하여, 유효하고 유효하지 않은 입력 요소의 스타일을 적용합니다 :
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
»그것을 자신을 시도