大家一定很奇怪為什麼又蹦出一篇 ng-repeat 的文章了。本來是要介紹新的宣告式語法(Directives Syntax)，但突然想到有個很重要的 ng-repeat 用法忘了跟各位提到，所以才又會出現這一篇囉。
在 AngularJS 入門教學 - ngRepeat (一)中的是使用 ng-repeat 將 friends 陣列中的元素一一拿出來使用。但其實一般的物件也是能將其屬性及值都透過 ng-repeat 拿出來使用的，像是筆者這次準備了一個 members 物件：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var MembersCtrl = function($scope) { $scope.members = { '船長': { name: '蒙其·D·魯夫', age: 19, skills: ['橡膠槍', '橡膠火箭砲', '換檔', '霸氣'] }, // 略... '音樂家': { name: '布魯克', age: 90, skills: ['催眠曲·輪舞', '鼻唄三丁·矢筈斬', '冰凍劍', '哼歌·吹雪斬'] } }; }; |
members 中的職位都會對應到一位角色，如果依 "member in members" 的方法來看的話，我們可以很簡單的把每位角色資料顯示出來：
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="span7" style="margin-top:20px;" ng-controller="MembersCtrl"> <table class="table table-striped table-bordered"> <thead> <tr> <td>名稱</td> <td>年齡</td> <td>專長</td> </tr> </thead> <tbody> <tr ng-repeat="member in members"> <td>{{ member.name }}</td> <td>{{ member.age }}</td> <td>{{ member.skills.join(', ') }}</td> </tr> </tbody> </table> </div> |
這樣的效果跟用陣列存放物件是都一樣的：
唯一比較大的區別就是，如果是陣列的話，它是會依序處理的；但如果是物件的話，它的順序並不會依程式中設定的順序來處理喔。
不過一般針對像是 HashMap 或是 Dictionary 物件做所謂的迭代時，都還能分別取出 key 及 value，那 ng-repeat 可以嗎？
如果是搭配陣列的話，至少 key 就等於是 $index，如果是搭配物件的話，則可以把語法改成 "(key, value) in obj" 的方式就能再取得 key 了。
快來將 ng-repeat 的部份修改一下吧：
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table class="table table-striped table-bordered"> <thead> <tr> <td>職位</td> <td>名稱</td> <td>年齡</td> <td>專長</td> </tr> </thead> <tbody> <tr ng-repeat="(title, member) in members"> <td>{{ title }}</td> <td>{{ member.name }}</td> <td>{{ member.age }}</td> <td>{{ member.skills.join(', ') }}</td> </tr> </tbody> </table> |
多加了一個 title 之後：
這樣使用起來是不是很方便呢！不過這樣如果還要再搭配 filter 的話，有辦法嗎？嘿~有是有，但得要自己定義過濾器(Filters)才行，這部份又留到後面提到自定過濾器(Filters)再來說明囉。
作業的話就...就算了XD