[AngularJs] 使用ng-repeat-start實作巢狀table

   目前AngularJs的程式,若要呈現表列資訊時,最常使用的是ng-repeat來render table。而在某些需求下,要在每一列的下方再呈現子項目的列表
如下圖:
image

預設<tr>使用ng-repeat時,一定要有</tr>的結尾元素,所以不能在<tr ng-repeat>..內再插入一個<tr ng-repeat>,會無法取得父層的資訊,而大部份使用的解法是,在<tr>的外層使用<tbody>即可以達到此需求。

image

問題來了..

  目前有一需求是要增加第層的顯示,<tbody>用完了,已沒有其他元素可以再往下包一層<tr>了,如下為錯誤的範例,硬加進去,程式會跑,但取不到第二層的category,所以無法顯第三層

image

解決方法

在AngularJs 1.2之後,增加了ng-repeat-start及ng-repeat-end來自行決定開始及結尾的符號。ps:兩者要搭配使用

image

紅框處表示開始與結尾,所以中間可以再放第三層ng-repeat,同理可證,若你將第三層的ng-repeat改成ng-repeat-start/end的方式,就可以往下放更多層進去。ps:ng-repeat-end 本例只會render </tr>

完整程式

See the Pen table-nested-repeat-start-ok by kimxinfo (@kimxinfo) on CodePen.


參考來源

http://sweeteason.pixnet.net/blog/post/42233743-angularjs-%E5%88%9D%E5%AD%B8%E8%80%85%E7%AD%86%E8%A8%98%E8%88%87%E6%95%99%E5%AD%B8-(%E4%BA%94)---%E7%B9%BC%E7%BA%8C%E6%B7%B1%E5%85%A5%E5%AD%B8

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS