[angularJS] 양방향 데이터 바인딩

양방향 데이터 바인딩이란, 완전히 동기화된 데이터라고 생각하면 좋다.

모델을 갱신하면 뷰에 반영되고, 뷰를 갱신하면 모델에 반영되는 형태이다.

* 동기화를 위한 다른 작업을 하지 않아도 자동으로 동기화.

<div ng-app="myApp"> <div ng-controller="MainCtrl"> <input type="text" ng-model="myModel" placeholder="Start typing..." /> <p>My model data: {{ myModel }}</p> </div> </div>

- view단의 <input>에서 myModel이라는 모델을 연결.

var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', ['$scope', function ($scope) { $scope.myModel = ''; }]);

실제 출력 화면의 textbox에 입력해보면 My model data에 값이 바로바로 동기화되는 것을 확인할 수 있다.

* 출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/