ネストされたNG-繰り返しオブジェクト内

Question

私は角-JS ngのリピートを使用して上記の画像を実現したいです。私は3番目の列に問題があります。

<div tasty-table 
    bind-resource-callback="showTCS.loadAllTCS" 
    bind-init="showTCS.init" 
    bind-filters="showTCS.listParams" 
    bind-reload="showTCS.reloadCallback"> 
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow" 
      cellpadding="4" 
      cellspacing="4" 
      align="center"> 
     <thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead> 
     <tbody> 
      <tr ng-repeat="tcs in rows"> 
       <td>{{tcs.trackName}}</td> 
       <td> 
        <table align="left"> 
         <tbody> 
          <tr ng-repeat="category in tcs.category"> 
           <td>{{category.categoryName}}</td> 
           <td> 
            <table> //this one should be on the 3rd <td> of parent table 
             <tbody> 
              <tr ng-repeat="skill in category.skill"> 
               <td>{{skill.skillName}}</td> 
              </tr> 
             </tbody> 
            </table> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </td> 
       <td align="center"> 
        <a ui-sref="mainCategoryDetails({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-eye-open"></a> 
       </td> 
      </tr> 
      <tr> 
       <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td> 
      </tr> 
     </tbody> 
    </table> 
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div> 
</div> 

これは私が今まで試したことであり、出力はサンプル画像に示されているとおりではありません。問題は、親テーブルの3番目のスキルである最後のデータを出力する方法です。

Answer 1

は、TBODYを繰り返し続けているので、非常に良いではない答えを、見つけたが

<div class="row-fluid" style="padding-top: 2%"> 
<div tasty-table 
    bind-resource-callback="showTCS.loadAllTCS" 
    bind-init="showTCS.init" 
    bind-filters="showTCS.listParams" 
    bind-reload="showTCS.reloadCallback"> 
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow" 
      cellpadding="4" 
      cellspacing="4" 
      align="center"> 
     <thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead> 
     <tbody ng-repeat="tcs in rows"> 
      <tr ng-repeat="category in tcs.category"> 
       <td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td> 
       <td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td> 
       <td> 
        <ul class="list-unstyled" > 
         <li ng-repeat="skill in category.skill">{{skill.skillName}}</li> 
        </ul> 
       </td> 
       <td align="center"> 
        <a ui-sref="mainCategoryDetails({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-eye-open"></a> 
        <a ui-sref="editMainCategory({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-edit"></a> 
        <a ui-sref="deleteMainCategory({mainCatId: mainCategory.mainCat_id})" class="glyphicon glyphicon-minus-sign"></a> 
       </td> 
      </tr> 
      <tr> 
       <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td> 
      </tr> 
     </tbody> 
    </table> 
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div> 
</div>