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>
または、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">
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>