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 中的数据绑定是模型和视图之间的同步。
当模型中的数据发生变化时，视图会反映该变化，而当视图中的数据发生变化时，模型也会更新。这会立即且自动发生，从而确保模型和视图始终保持更新。
示例
<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 控制器章节中了解有关控制器的更多信息。
由于模型和视图的即时同步，控制器可以完全与视图分离，并且只需专注于模型数据。由于 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>
亲自试一试 »
