AngularJS 데이터 바인딩
AngularJS의 데이터 바인딩은 모델과 뷰 간의 동기화입니다.
데이터 모델
AngularJS 애플리케이션에는 일반적으로 데이터 모델이 있습니다. 데이터 모델은 응용 프로그램에 사용할 수 있는 데이터 모음입니다.
예시
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML 보기
AngularJS 애플리케이션이 표시되는 HTML 컨테이너를 보기라고 합니다.
보기는 모델에 액세스할 수 있으며 보기에 모델 데이터를 표시하는 방법에는 여러 가지가 있습니다.
ng-bind요소의 innerHTML을 지정된 모델 속성에 바인딩하는 지시문 을 사용할 수 있습니다 .
예시
<p ng-bind="firstname"></p>
이중 중괄호 를 사용하여 모델의 내용을 표시 할 수도 있습니다 .{{ }}
예시
<p>First name: {{firstname}}</p>
또는 ng-modelHTML 컨트롤의 지시문을 사용하여 모델을 뷰에 바인딩할 수 있습니다.
ng-model지침 _
지시문을 사용하여 ng-model모델의 데이터를 HTML 컨트롤(입력, 선택, 텍스트 영역)의 보기에 바인딩합니다.
예시
<input ng-model="firstname">
이 ng-model지시문은 모델과 보기 간의 양방향 바인딩을 제공합니다.
양방향 바인딩
AngularJS의 데이터 바인딩은 모델과 뷰 간의 동기화입니다.
모델 의 데이터가 변경되면 뷰 에 변경 사항 이 반영되고 뷰의 데이터가 변경 되면 모델 도 업데이트됩니다. 이는 즉시 자동으로 발생하므로 모델과 뷰가 항상 업데이트됩니다.
예시
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>