3、列表、表格以及其他迭代型元素
ng-repeat可能是最有用的 Angular 指令了,它可以根據集合中的專案一次建立一組元素的多份拷貝。
比如一個學生名冊系統需要從伺服器上獲取學生資訊,目前先把模型之間定義在 JavaScript 程式碼裡面:
1 var students = [{name: 'Mary', id: '1'}, 2 {name: 'Jack', id: '2'}, 3 {name: 'Jill', id: '3'}]; 4 function StudentListController($scope) { 5 $scope.students = students; 6 }
為了顯示這個學生列表,可以編寫如下程式碼:
1 <ul ng-controller="StudentListController"> 2 <li ng-repeat="student in students"> 3 <a href="/student/view/{{student.id}}">{{student.name}}</a> 4 </li> 5 </ul>
ng-repeat 將會生成標籤內部所有 HTML 元素的一份拷貝,包括放指令的標籤,顯示結果如下:
根據具體情況分別連結到 /student/view/1、/student/view/2 以及 /student/view/3。
ng-repeat 指令可以通過 $index 返回當前引用的元素序號(類似<s:iterator>標籤中的 index),還可以通過 $first、$middle及 $last,ng-repeat 指令返回布林值。
4、隱藏和顯示
對於選單、上下文敏感的工具以及很多其他情況來說,顯示和隱藏元素是一項核心功能。
ng-show 和 ng-hide 指令的功能是等價的,但是執行效果正好相反。
ng-show 在表示式為 true 時將會顯示元素,為 false 時將會隱藏元素;而 ng-hide 則恰好相反。
工作原理:根據實際情況把元素的樣式設定為 display : block 來顯示元素;設定為 display : none 來隱藏元素。
5、CSS 類和樣式
目前你已經可以在應用中動態地設定 CSS 類和樣式了,只有使用{{ }}插值語法把它們進行資料繫結即可,甚至可以在模板中構造 CSS 類名的部分匹配方式。
.menu-disabled-true { color: gray; }
使用以下模板,可以將功能顯示成禁用狀態:
1 <div ng-controller="MenuController"> 2 <ul> 3 <li class="menu-disabled-{{isDisabled}}" ng-click="DisabledIt()">Click</li> 4 ... 5 </ul> 6 </div>
這樣通過控制器來設定 isDisabled 屬性:
1 function MenuController($scope) { 2 $scope.isDisabled = false; 3 4 $scope.disabledIt = function() { 5 $scope.isDisabled = true; 6 } 7 }
這樣,只有 isDisabled 為 true 時,拼接出來的才是 menu-disabled-true,CSS 樣式才會起作用。
當使用插值的方式繫結內聯樣式的時候,同樣適用,例如 style = "{{some.expression}}"。
但是由於這種方式並不靈活,後期維護困難,所以 Angular 中推薦使用 ng-class 和 ng-style 指令。
這兩個指令都可以接受一個表示式,表示式執行的結果可能是如下取值之一:
- 表示 CSS 類名的字串,以空格分隔
- CSS 類名陣列
- CSS 類名到布林值的對映
我們可以如下實現顯示錯誤和警告資訊的功能:
1 .error { 2 background-color: red; 3 } 4 .warning { 5 background-color: yellow; 6 } 7 <div ng-controller="HeaderController"> 8 ... 9 <div ng-class="{error: isError, warning: isWarning}">{{messageText}}</div> 10 ... 11 <button ng-click="showError()">Simulate Error</button> 12 <button ng-click="showWarning()">Simulate Warning</button> 13 </div> 14 function HeaderController($scope) { 15 $scope.isError = false; 16 $scope.isWarning = false; 17 18 $scope.showError = function () { 19 $scope.messageText = 'This is an error'; 20 $scope.isError = true; 21 $scope.isWarning = false; 22 }; 23 24 $scope.showWarning = function () { 25 $scope.messageText = 'Just a warning, Please carry on.'; 26 $scope.isWarning = true; 27 $scope.isError = false; 28 } 29 }
你會發現這樣實現的很優雅,而且容易維護,下面還可以做一個更炫的事情,例如,把表格中被選中的行進行高亮顯示。
首先,在 CSS 中設定一個樣式:
1 .selected { 2 background-color: lightgreen; 3 }
在模板中,我們把 ng-class 設定為 {selected: $index == selectedRow},當模型屬性 selectedRow 的值等於 ng-repeat 中的 $index 時,selected 樣式就會設定到對應的那一行。
1 <table ng-controller="RestaurantTableController"> 2 <tr ng-repeat="restaurant in directory" ng-click="selectRestaurant($index)" 3 ng-class="{selected : $index == selectedRow}"> 4 <td>{{restaurant.name}}</td> 5 <td>{{restaurant.cuisine}}</td> 6 </tr> 7 </table>
建立控制器:
1 var app = angular.module('app', []); 2 3 app.controller('RestaurantTableController', function ($scope) { 4 $scope.directory = [{name: 'The Handsome Heifer', cuisine: 'BBQ'}, 5 {name: 'Green\'s Green Greens', cuisine: 'Salads'}, 6 {name: 'House of Fine Fish', cuisine: 'Seafood'}]; 7 }); 8 9 $scope.selectRestaurant = function (row) { 10 $scope.selectedRow = row; 11 }
顯示效果如圖: