AngularJS 数据绑定



  • 数据模型

    AngularJS 中的数据绑定是模型和视图之间的同步。
    AngularJS 应用程序通常具有数据模型。 数据模型是可用于应用程序的数据的集合。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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>蝴蝶教程(jc2182.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 控制器