AngularJS 的常用特性（二）

shaopiing發表於2016-05-21
AngularJS

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 }

　　顯示效果如圖：

特別感謝：《用 AngularJS 開發下一代 Web 應用》

相關文章