AngularJSでデータバインディングは、モデルとビューの間の同期です。
データモデル
AngularJSアプリケーションは通常、データ・モデルを持っています。 データモデルは、アプリケーションのために利用可能なデータの集まりです。
例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTMLビュー
AngularJSアプリケーションが表示されているHTMLコンテナは、ビューと呼ばれています。
ビューは、モデルへのアクセスを有し、ビュー内のモデルデータを表示するいくつかの方法があります。
あなたが使用することができますng-bind指定されたモデルのプロパティに要素のinnerHTMLプロパティを結合するディレクティブを、：
また、二重の中括弧を使用することができます{{ }} {{ }} {{ }}モデルからコンテンツを表示するには：
それとも、使用することができますng-modelビューにモデルをバインドするHTMLコントロールに指示を。
ng-model指令
使用ng-model HTMLコントロールのビューにモデルからのデータをバインドするためにディレクティブを（入力、選択、テキストエリア）
ng-modelディレクティブは、モデルとビューの間の結合2-方法を提供します。
双方向バインディング
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.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
»それを自分で試してみてください