최신 웹 개발 튜토리얼
 

AngularJS입력 지침


데이터 바인딩과 입력 필드 :

<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>
»그것을 자신을 시도