上一节:
下一节:

  AngularJS 数据绑定

  • 数据模型

    AngularJS 中的数据绑定是模型和视图之间的同步。
    AngularJS 应用程序通常具有数据模型。 数据模型是可用于应用程序的数据的集合。 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl"></div> 
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstname = "John";
            $scope.lastname = "Doe";
        });
    </script>
</body>
</html>

  • HTML视图

    显示 AngularJS 应用程序的HTML容器称为视图。
    视图可以访问模型，并且有几种方法可以在视图中显示模型数据。
    您可以使用 ng-bind 指令，该指令会将元素的innerHTML绑定到指定的model属性： 
    <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 中的数据绑定是模型和视图之间的同步。
    当模型中的数据更改时，视图将反映更改，而当视图中的数据更改时，也会更新模型。 这会立即自动发生，从而确保始终更新模型和视图。 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <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>
</body>
</html>
    尝试一下

  • AngularJS 控制器

    AngularJS 中的应用程序由控制器控制。
    由于模型和视图可以立即同步，因此控制器可以与视图完全隔离，而只需专注于模型数据即可。 由于 AngularJS 中的数据绑定，该视图将反映控制器中所做的任何更改。 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜鸟教程(cainiaoya.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <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>
</body>
</html>
    尝试一下
    下一章中您将了解 AngularJS 控制器。
上一节:
下一节: