[AngularJS] (6) 모델 | ng-model, ng-show, valid, dirty, touched

목차

(1) 기본 웹 서비스 개발환경 구축

(2-1) 기본 예제

(2-2) AngularJS 템플릿 만들고 적용하기

(3) 표현식 | {{data}}

(4) 모듈 | angular.module("appName", [])

(5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat

(6) 모델 | ng-model, ng-show, valid, dirty, touched

(7) Controller

(8) scope 객체 | scope, rootScope

(9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number

(10) 서비스 | location, get, timeout, interval, app.service()

 

---

1.  ng-model 

AngularJS 애플리케이션에서 input 태그를 지칭하고 이를 제어하기 위한 개념이다.

ng-model 속성으로 이름을 지정하면 input 태그에 입력된 값을 제어할 수 있다.

  data1 : <input type="text" ng-model="data1"/><br/>
  data2 : <input type="text" ng-model="data2"/><br/>
  <hr/>
  data1 : {{data1}}<br/>
  data2 : {{data2}}<br/>

 

 

2. 입력검증처리 : ng-show 

   input 태그에 설정된 type과 현재 입력된 값의 type이 일치하지 않으면 오류 메세지를 출력하게끔 할 수 있다.

 

 

 

 

3. 상태에 따른 처리

> $valid : 유효한 값 여부 체크

> $dirty : 초기값 변경 여부 체크

 

 

> $touched : 포커스 존재여부 체크

 

 

4. 상태에 따른  CSS적용

.ng-css.ng-empty {
	background-color : aqua;
}
.ng-css.ng-not-empty {
	background-color : fuchsia;
}
.ng-css.ng-touched {
	width: 200px;
}
.ng-css.ng-untouched {
	width: 1000px;
}
.ng-css.ng-valid {
	height: 200px;
}
.ng-css.ng-invalid {
	height: 100px;
}
.ng-css.ng-dirty {
	color: white;
}