AngularJS 데이터 바인딩

AngularJS의 데이터 바인딩은 모델과 뷰 간의 동기화입니다.

과목 추천：

데이터 모델

예제

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

AngularJS 애플리케이션은 일반적으로 데이터 모델을 가집니다. 데이터 모델은 애플리케이션에 사용할 수 있는 데이터의 집합입니다.

HTML 뷰

AngularJS 애플리케이션의 HTML 컨테이너는 뷰로 불립니다.

뷰는 모델을 접근할 수 있으며, 모델 데이터를 뷰에서 표시할 수 있는 여러 가지 방법이 있습니다. ng-bind 지시어는 요소의 innerHTML을 지정된 모델 속성에 바인딩합니다：

예제

<p ng-bind="firstname"></p>

직접 시도해보세요

또한, 두 대括호를 사용할 수 있습니다 {{ }} 를 사용하여 모델의 내용을 표시할 수 있습니다：

예제

<p>First name: {{firstname}}</p>

직접 시도해보세요

또는, HTML 컨트롤에 ng-model 지시어는 모델을 뷰에 바인딩합니다.

ng-model 지시어

사용 ng-model 지시어는 모델의 데이터를 HTML 컨트롤(input, select, textarea)의 뷰에 바인딩합니다.

예제

<input ng-model="firstname">

직접 시도해보세요

ng-model 지시어는 모델과 뷰 간의 양방향 바인딩을 제공합니다.

양방향 바인딩

AngularJS의 데이터 바인딩은 모델과 뷰 간의 동기화입니다.

모델의 데이터가 변경될 때마다 뷰는 이러한 변경사항을 반영하고, 뷰의 데이터가 변경될 때마다 모델도 업데이트됩니다. 이는 즉각적이고 자동적으로 발생하여 모델과 뷰가 항상 업데이트되도록 보장합니다.

예제

<div ng-app="myApp" ng-controller="myCtrl">
  이름: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

직접 시도해보세요

AngularJS 컨트롤러

AngularJS 애플리케이션은 컨트롤러로 제어됩니다. 컨트롤러에 대한 내용은 AngularJS 컨트롤러 장에서 확인하세요.

모델과 뷰의 즉각적인 동기화로 인해 컨트롤러는 뷰와 완전히 분리되어 모델 데이터에만 집중할 수 있습니다. AngularJS의 데이터 바인딩 덕분에 뷰는 컨트롤러에서 수행된 모든 변경사항을 반영합니다.

예제

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

직접 시도해보세요