参考手册
AngularJS 模型
AngularJS 控制器

AngularJS 数据绑定

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

数据模型

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

  1.  var app = angular.module('myApp', []);
  2.  app.controller('myCtrl', function($scope) {
  3.  $scope.firstname   = "John";
  4.  $scope.lastname = "Doe";
  5. });

HTML 视图

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7.     <p ng-bind="firstname">
  8. </div>
  10. <script>
  11. var app = angular.module('myApp', []);
  12. app.controller('myCtrl', function($scope) {
  13.     $scope.firstname = "John";
  14.     $scope.lastname = "Doe";
  15. });
  16. </script>
  18. <p>使用 ng-bind 指令将元素的 innerHTML 绑定到数据模型中的属性。</p>
  20. </body>
  21. </html>
运行一下

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7.     <p>First name: {{firstname}}</p>
  8. </div>
  10. <script>
  11. var app = angular.module('myApp', []);
  12. app.controller('myCtrl', function($scope) {
  13.     $scope.firstname = "John";
  14.     $scope.lastname = "Doe";
  15. });
  16. </script>
  18. <p>可以使用双大括号显示数据模型中的内容。</p>
  20. </body>
  21. </html>
运行一下

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

ng-model 指令

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

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7.     <input ng-model="firstname">
  8. </div>
  10. <script>
  11. var app = angular.module('myApp', []);
  12. app.controller('myCtrl', function($scope) {
  13.     $scope.firstname = "John";
  14.     $scope.lastname = "Doe";
  15. });
  16. </script>
  18. <p>在 HTML 控件（input、select、textarea）上使用 ng-model 指令在视图和数据模型之间绑定数据。</p>
  20. </body>
  21. </html>
运行一下

ng-model 指令在模型和视图之间提供了双向绑定。

双向绑定

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

当 模型 中的数据发生变化时，视图 会反映变化，当 视图 中的数据发生变化时，模型 也会更新。这会立即自动发生，从而确保模型和视图随时更新。
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7.     Name: <input ng-model="firstname">
  8.     <h1>{{firstname}}</h1>
  9. </div>
  11. <script>
  12. var app = angular.module('myApp', []);
  13. app.controller('myCtrl', function($scope) {
  14.     $scope.firstname = "John";
  15.     $scope.lastname = "Doe";
  16. });
  17. </script>
  19. <p>更改输入字段中的名称，模型数据将自动更改，因此标题也将更改其值。</p>
  21. </body>
  22. </html>
运行一下

AngularJS 控制器

AngularJS 中的应用程序由控制器控制。可以阅读 AngularJS 控制器 一章中的内容。

由于模型和视图的即时同步，控制器可以与视图完全分离，只需专注于模型数据。由于 AngularJS 中的数据绑定，视图将反映控制器中所做的任何更改。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7.     <h1 ng-click="changeName()">{{firstname}}</h1>
  8. </div>
  10. <script>
  11. var app = angular.module('myApp', []);
  12. app.controller('myCtrl', function($scope) {
  13.     $scope.firstname = "John";
  14.     $scope.changeName = function() {
  15.         $scope.firstname = "Nelly";
  16.     }
  17. });
  18. </script>
  20. <p>点击标题运行 "changeName" 功能。</p>
  22. <p>此示例演示如何使用控制器更改模型数据。</p>
  24. </body>
  25. </html>
运行一下
AngularJS 模型
AngularJS 控制器

分类导航