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>
自己动手试一试 »
