AngularJS 모델

AngularJS 모델

AngularJS 모델은 ng-model 지시자로 사용합니다.

1. ng-model을 이용하게되면 입력 필드의 값을 변수에 바인딩할 수 있습니다.

예를 들어

<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>

=> name으로 바인딩을 하기 때문에 

=> myCtrl이라는 컨트롤러에서 해당 model인 name을 John Doe로 바인딩을 하므로

=> input 필드에 John Doe가 들어가있게 됩니다.

바인딩은 양방향입니다.

즉 사용자가 입력한 대로 속성 값도 변하게 되는거죠.

즉 표현식을 이용하면 해당 표현이 될 떄 사용자의 입력에 따라 속성값도 바뀌게 됩니다.

예를 들어 

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
  <h1>You entered: {{name}}</h1>
</div>

위와 아래 사진 처럼 입력 필드의 값에 따라 속성이 바뀌는 양방향 바인딩을 볼 수 있습니다.

---

2. ng-model은 또한 사용자가 입력한 값의 유효성을 검사하는 기능을 가집니다.

즉 input type이 email일 경우 이메일 사용 형식에 맞으면 에러 출력하지 않고 사용형식이 맞지 않다면 에러를 출력해줍니다.

예를 들어

<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에서 표현식의 값이 있다면 출력이 되게 됩니다. myForm에서 myAddress에서 타입이 email인데 $error가 존재한다면 

Not a valid e-mail address를 출력합니다.

위와 아래 사진과 같이 이메일 형식에 맞지않으면 에러메시지를 출력해주고 이메일 형식이 맞으면 출력하지않습니다.

---

3. ng-model은 또한 데이터의 상태에 대해 Boolean값을 출력해줍니다.

입력필드가 변한다면 (dirty) 

입력필드가 포커싱 된다면 (Touched)

값이 기준에 맞고 올바르다면 (Valid)

예를 들어서

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

위와 같은 코드를 작성한다면 

이메일 입력 필드의 값이 올바르면 valid가 true

변경된다면 dirty가 true

포커싱 된다면 touched가 true

입니다.

위와 아래처럼 boolean 값이 변경 되는 것을 확인 할 수 있습니다.