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 繫結到指定的模型屬性。
您還可以使用雙大括號 {{ }} 來顯示模型中的內容。
或者，您可以在 HTML 控制元件上使用 ng-model 指令將模型繫結到檢視。
ng-model 指令
使用 ng-model 指令將資料從模型繫結到 HTML 控制元件（input、select、textarea）上的檢視。
ng-model 指令在模型和檢視之間提供雙向繫結。
雙向繫結
AngularJS 中的資料繫結是指模型和檢視之間的同步。
當模型中的資料發生更改時，檢視會反映出更改；當檢視中的資料發生更改時，模型也會得到更新。這會立即自動發生，從而確保模型和檢視始終保持同步。
示例
<div ng-app="myApp" ng-controller="myCtrl">
姓名: <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 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>
自己動手試一試 »
