AngularJS 양방향 데이터 바인딩

AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다.

먼저 jQuery를 사용한 아래 예제를 확인해보자.

InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다.

HTML 파일.

  <body>
    <input type="text" id="txtText" />
    <h1 id="p"></h1>
  </body>

Javascript 파일.

$(function(){
  $("#txtText").keyup(function() {
      $("#p").text($(this).val());
  });
});

소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다.

물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수 있다.

AngularJS를 이용하면, 다음 예제와 같이 더욱 더 간단하게 변경할 수 있다.

HTML 파일.

  <body ng-controller="ngCtrl">
    <input ng-model="text" />
    <p>{{ text }}</p>
  </body>

Javascript 파일.

var app = angular.module('ngApp', []);

app.controller('ngCtrl', function($scope) {
});

위의 예제에서 확인할 수 있듯이, InputText Element의 ng-model 디렉티브에 text라는 이름을 할당한다.

이렇게 되면, 해당 ngCtrl(AngularJS 컨트롤러)에 text라는 이름으로 InputText의 값이 할당 되고,

{{ }} 라는 AngularJS의 표현식을 사용해서 text에 할당된 값을 표현할 수 있다.

물론 이 값은 {{ text }} 표현식을 사용하면, 어느곳에나 적용시킬 수 있다.

AngularJS를 이용한 From Validation. (0)	2015.12.31
HighCharts 모듈 사용하기. (0)	2015.12.30
AngularJS와 jQuery의 간단한 비교.. (2)	2015.12.25

Programmer