数据在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>
试一试»