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">
  Name: <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>

自分で試してみる