AngularJS教程之二雙向數(shù)據(jù)綁定

Penjoyer 2015-07-27

展開全文

AngularJS教程之二：雙向數(shù)據(jù)綁定

　　前面我們簡單了解了AngularJS的Helloworld應(yīng)用,，下面看看第二個案例：

<html ng-app="phonecatApp">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>

　　這個案例中除了前面介紹的ng-app ng-controller以外,，多了一個ng-repeat,，其實這就是一個列表標簽符號，類似Struts的logic:iterator之類。告訴Angular為列表每一行創(chuàng)建一個 <li> 開頭的元素,。

顯示效果如下：

控制器代碼如下：

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM? with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM?',
'snippet': 'The Next, Next Generation tablet.'}
];
});

　　這里我們?yōu)樽饔糜?scope定義了一個phones 列表數(shù)組,，分別可以用{{phone.name}}和{{phone.snippet}}取出。

　　不知道有沒有注意到,，這個案例和第一個Helloworld案例區(qū)別在于第一行代碼,。這里不是一個簡單的自己定義的JS函數(shù)，而是從一個模塊'phonecatApp'中獲得,，獲得以后,，聲明為'PhoneListCtrl'.而這個模塊是在模板<html ng-app="phonecatApp">中定義啟動的。如下圖：

　　一個ng-app擁有一個注入器injector,，負責一群組件的獲取和其中依賴注入,，類似一個依賴注入框架或容器，每一個注冊在injector中的組件都有一個名稱,，我們通過$injector,get(名稱)來獲得這個組件,。比如這個案例名稱是'PhoneListCtrl'。首先從緩存尋找如果哦沒有從工廠中創(chuàng)建新的,。

模塊'phonecatApp可以認為是提供注入器的管道,，或者是注入器的工廠。

膠水Scope對象

注意到上面第三行控制器的代碼：phonecatApp.controller('PhoneListCtrl', function ($scope)

$scope是注入到我們的控制器中,，這個scope是root scope的原型對象,。

作用域scope在Angular中很重要，作用域scope可以被看作是膠水,，允許模板,，模型和控制器一起工作。

如下圖：scope is the gule表示scope就是膠水,。

$scope對象中增加的字段name和方法action,，對應(yīng)到視圖Dom中的{{name}}和action()；

下圖是scope和模型之間的對應(yīng)關(guān)系,。

scope中的name對應(yīng)模型字符串,，value數(shù)值型對應(yīng)number，原始類型對應(yīng),；對象hash也是對應(yīng)映射,；類型Type對應(yīng)映射。

　　所有對模型的改變都會通過scope同步映射到視圖View,，保持模型和視圖數(shù)據(jù)的同步變化,，同樣視圖的任何變化將映射到模型中,。下圖表示這種Model和視圖DOM之間隨時隨地的同步映射：

下面通過案例說明這種同步實時更新的魅力,。

ng-repeat

注意到 <li ng-repeat="phone in phones">寫法，我們還可以有

<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>

<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table>

下面我們?yōu)檫@個repeat增加過濾器。

Search: <input ng-model="query">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>

注意到我們使用"|"來實現(xiàn)過濾器,。AngularJS過濾器用來格式化輸出給用戶的數(shù)據(jù),。除了格式化數(shù)據(jù)，過濾器還能修改DOM,。這使得過濾器通常用來做些如“適時地給輸出加入CSS樣式”等工作,。

name | uppercase

是一個大寫格式化的過濾器。

　　上面這個案例的過濾器是：這可以讓用戶輸入搜索條件,，并立即看到自己輸入的搜索詞語對下面手機清單上的影響,。如果輸入m，將在清單中只出現(xiàn)m開始的字母：

　　這里很好體現(xiàn)了通過scope實現(xiàn)界面視圖和Model模型的雙向同步綁定,，用戶在名為query的輸入框中輸入數(shù)據(jù)后,，立即通過列表repeater的過濾器 (phone in phones | filter:query)顯示出來，數(shù)據(jù)模型的改變立即影響到repeater的改變,，而repeater更新DOM來顯露當前模型狀態(tài)的改變,。

下面再看看這個案例的擴展

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>

<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>

　　這個案例中我們增加了select ng-model="orderProp"，這個應(yīng)該是模型中的一個對象,，過濾器中增加了orderBy:根據(jù)orderProp的值排序,，如果用戶在下拉菜單選擇Newest，那么orderProp值是age,，根據(jù)年齡排序,；如果選擇Alphabetical，那么orderProp值是Alphabetical,，根據(jù)字母排序,。