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

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


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

問題來了..

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

解決方法

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



紅框處表示開始與結尾，所以中間可以再放第三層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