繰り返しデータ用AngularJS行スパン

Question

私はRoleとScreen変数を持つArrayを持っています。

ロール変数はこの配列で繰り返すことができます。

繰り返しデータ用にrowspanを作成したいとします。

どうすれば簡単に行うことができますか？

私の擬似コードは、私が

<table> 
    <tr> 
     <td rowspan="3">Admin</td> 
     <td>AAA</td> 
    </tr> 
    <tr> 
     <td>BBB</td> 
    </tr> 
    <tr> 
     <td>CCC</td> 
    </tr> 
    <tr> 
     <td rowspan="2">Standard</td> 
     <td>DDD</td> 
    </tr> 
    <tr> 
     <td>EEE</td> 
    </tr> 
</table> 

012以下で出力を必要とする

角度

$scope.testData=[ 
    {"Role":"Admin","Screen":"A"}, 
    {"Role":"Admin","Screen":"B"}, 
    {"Role":"Admin","Screen":"C"}, 
    {"Role":"Standard","Screen":"H"}, 
    {"Role":"Standard","Screen":"FH"}, 
]; 

HTML

<tr ng-repeat="detail in Roles"> 
     <td>{{detail.Role}}</td> 
     <td>{{detail.Screen}}</td> 
</tr> 

の下であります

Answer 1

は

$scope.testData = [ 
    {"Role":"Admin","Screen":["A", "B", "C"]}, 
    {"Role":"Standard","Screen": ["H", "FH"]} 
]; 

が、それはあなたのROWSPANテーブルのためにあまりにも簡単です（たとえばangular.forEach（）を使用する）ように見えるように、あなたのオブジェクトを変更します。

<table> 
    <tr ng-repeat-start="(key, val) in testData"> 
     <td rowspan="{{val.Screen.length}}">{{val.Role}}</td> 
     <td>{{val.Screen[0]}}</td> 
    </tr> 
    <tr ng-repeat-end ng-repeat="value in val.Screen.slice(1)"> 
     <td>{{value}}</td> 
    </tr> 
</table>