Notes

AngularJS Data Binding - 資料繫結

AngularJS 的Data binding可以使model與view進行同步。

 

Data Model - 模型

AngularJS 通常會有data model，data model裡的資料可以在AngularJS使用。

data model如下:

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.Name = "Berry";
        $scope.age = "18歲";
     });
</script>

 

HTML View

在HTML中，顯示AngularJS的部分，即為AngularJS的view。

view 可與model連接，以多種方式將資料顯示於view。

 

ng-bind : 綁定資料於 innerHTML

<div ng-app="myApp" ng-controller="myCtrl">
   
    <h1 ng-bind="Name"></h1>
    <h2 ng-bind="Age"></h2>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Berry";
            $scope.Age = "18歲";
        });
    </script>

</div>

顯示:

 

表達式 : 使用 {{  }} 綁定資料

<div ng-app="myApp" ng-controller="myCtrl">
   
    <h1>{{Name}}</h1>
    <h2>{{Age}}</h2>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Berry";
            $scope.Age = "18歲";
        });
    </script>

</div>

顯示:

 

ng-model : 將model資料綁定於HTML控制項(input, select, textarea)

<div ng-app="myApp" ng-controller="myCtrl">

    姓名:<input type="text" ng-model="Name" />
    <br />
    年紀:<input type="number" ng-model="Age" />

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Berry";
            $scope.Age = 18;
        });
    </script>

</div>

<input type="text">欄位綁定Name，<input type="number">欄位綁定Age:

 

雙向綁定

ng-model可以將model與view進行雙向綁定。當model改變時，view跟著改變;而view(HTML控制項)改變時，model也會跟著改變。

<div ng-app="myApp" ng-controller="myCtrl">

    姓名:<input type="text" ng-model="Name" />
    <br />
    年紀:<input type="number" ng-model="Age" />
    <br />
    <h1>{{Name}},{{Age}}</h1>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Berry";
            $scope.Age = 18;
        });
    </script>

</div>

當<input>欄位改變時，<h1>的顯示也跟著改變:

 

AngularJS Controller

AngularJS由Controller所控制。因為model與view能夠及時同步，controller能夠與view完全分離，放置於model data中。由於資料綁定，當model data裡的controller變化時，view也能跟著改變。

  範例  

加入一個<button>與ng-click，按下時可以改變model data的值，並在app.controller中加入Change的function指定變更後的值。

<div ng-app="myApp" ng-controller="myCtrl">

    <button ng-click="Change()">十年後</button> 
    <h1>{{Name}},{{Age}}歲</h1>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Berry";
            $scope.Age = 18;
            //Change()
            $scope.Change = function () {
                //變更值
                $scope.Name = "Berry十年後";
                $scope.Age = 28;
            }
        });
    </script>

</div>

初始畫面:

按下按鈕:

 

 END 

回目錄