AngularJS Data Binding 2번째

AngularJS Data Binding

ng-model지침
ng-model지시문을 사용하여 모델의 데이터를 HTML 컨트롤의보기에 바인딩합니다 (input, select, textarea).

예
<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 Controllers 장의 컨트롤러에 대해 읽어보십시오 .

모델과 뷰의 즉각적인 동기화로 인해 컨트롤러는 뷰와 완전히 분리되어 모델 데이터에만 집중할 수 있습니다. 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>