[AngularJS] Data Binding: AngularJS 資料繫結
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>
初始畫面:
按下按鈕: