AngularJS 中的数据绑定是模型和视图之间的同步。
AngularJS 应用程序通常有一个数据模型。数据模型是可用于应用程序的数据的集合。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
显示 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 中的数据绑定,视图将反映控制器中所做的任何更改。
<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>
亲自试一试 »
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!