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 控件（输入、选择、文本区域）上的视图
ng-model 指令在模型和视图之间提供双向绑定。
双向绑定
AngularJS 中的数据绑定是模型和视图之间的同步。
model中的数据变化时，view反映变化，view中的数据变化时，model 也更新了。 这会立即自动发生，从而确保模型和视图随时更新。
实例
<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.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
亲自试一试 »
