AngularJS 数据绑定

AngularJS 中的数据绑定是模型和视图之间的同步。

数据模型

AngularJS 应用程序通常有一个数据模型。数据模型是可用于应用程序的数据的集合。

实例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML 视图

显示 AngularJS 应用程序的 HTML 容器称为视图。

视图可以访问模型，并且有几种方式可以在视图中显示模型数据。

您可以使用 ng-bind 指令，它会将元素的 innerHTML 绑定到指定的模型属性：

实例

<p ng-bind="firstname"></p>

亲自试一试

您还可以使用双大括号 {{ }} 来显示模型中的内容：

实例

<p>First name: {{firstname}}</p>

亲自试一试

或者，您可以在 HTML 控件上使用 ng-model 指令将模型绑定到视图。

ng-model 指令

使用 ng-model 指令将模型中的数据绑定到 HTML 控件（input, select, textarea）的视图上。

实例

<input ng-model="firstname">

亲自试一试

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 = "Bill";
  $scope.lastname = "Gates";
});
</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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

亲自试一试