AngularJS input 지시
정의와 사용법
AngularJS를 수정 <input> 요소의 기본 동작을 변경하지만 ng-model 속성이 존재하는 경우에만 적용됩니다.
그들은 데이터 바인딩을 제공하며, 이는 AngularJS 모델의 일부로서 AngularJS 함수와 DOM에서 참조하고 업데이트할 수 있다는 것을 의미합니다.
그들은 검증을 제공합니다. 예시: 다음과 같이 required 속성 <input> 요소가 비어 있으면 그 요소의 $valid 상태가 설정됩니다 false。
그들은 또한 상태 제어를 제공합니다. AngularJS는 모든 입력 요소의 현재 상태를 저장합니다。
입력 필드는 다음과 같은 상태를 가집니다：
$untouched이 필드는 아직 닿혀いません$touched이 필드가 닿혔습니다$pristine이 필드는 아직 변경되지 않았습니다$dirty이 필드가 변경되었습니다$invalid필드 내용이 무효$valid필드 내용이 유효
각 상태의 값은 보빈 값을 대표하며, true 또는 false。
예제
데이터 바인딩을 가진 입력 필드：
<input ng-model="myInput">
<p>입력 필드의 값은：</p>
<h1>{{myInput}}</h1>
문법
<input ng-model="name">
사용하여 ng-model 속성 값으로 입력 요소를 참조합니다.
CSS 클래스
AngularJS 애플리케이션 내 <input> 요소는 특정 클래스를 부여받습니다. 이 클래스는 입력 요소의 상태에 따라 스타일을 설정할 수 있습니다。
다음과 같은 클래스를 추가했습니다：
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>
