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 绑定到指定的模型属性:

实例

<p ng-bind="firstname"></p>
亲自试一试 »

您也可以使用双括号{{ }}来显示模型中的内容:

实例

<p>First name: {{firstname}}</p>
亲自试一试 »

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



ng-model 指令

使用 ng-model 指令将数据从模型绑定到 HTML 控件(输入、选择、文本区域)上的视图

实例

<input ng-model="firstname">
亲自试一试 »

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>
亲自试一试 »