數據在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指令提供一個雙向模型和視圖之間的結合。
雙向綁定
數據在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>
試一試»