AngularJS 數據綁定

AngularJS 中的數據綁定是模型和視圖之間的同步。

數據模型

AngularJS 應用程序通常有一個數據模型。數據模型是可用于應用程序的數據的集合。

實例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

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>

親自試一試