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 應用》

轉載于:https://www.cnblogs.com/JavaSubin/p/5515198.html

總結

以上是生活随笔為你收集整理的AngularJS 的常用特性（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。