Question

我有一个包含Role和Screen变量的Array。

可以在此数组中重复角色变量。

我想为重复数据创建rowspan。

我怎样才能轻松完成这项工作？

我的伪代码在下面

角

$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>

我需要下面的输出

<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>

Answer 1

将对象更改为（例如，使用angular.forEach（））

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

然后对你的rowspan表来说太容易了：

<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>

AngularJS用于重复数据的行数

1 个答案: