首页 > ng-repeat能实现这种模式的表格吗?

ng-repeat能实现这种模式的表格吗?

实现这种表格:

我的代码:

<table class="table table-bordered table-striped table-hover"
          ng-repeat='item in data'
      >
                <tbody ng-repeat='ite in item.switchStep'>
                    <tr ng-repeat='itm in ite.address'>
                        <td rowspan='{{rowspanFn(item.switchStep)}}' ng-if='$index==0'>{{item.switchProcess}}</td>
                        <td rowspan='{{ite.address.length}}' ng-if='$index==0'>{{ite.switchStep}}</td>
                        <td rowspan='{{ite.address.length}}' ng-show='$index==0'>{{ite.executeStep}}</td>
                        <td>{{itm.address}}</td>
                        <td>{{itm.name}}</td>
                        <td>{{itm.way}}</td>
                    </tr>
                </tbody>
</table>
var data = [
    {switchProcess:'切换准备',switchStep:[
                                    {
                                      switchStep:'应用检查',executeStep:'1',address:[
                                        {address:'南方基地',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''}
                                                                                    ]
                                     },
                                     {
                                       switchStep:'数据复制状态检查',executeStep:'2',address:[
                                        {address:'南方基地',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''}
                                                                                    ]
                                                                          }
                                                                        ]
    },
    {
        switchProcess:'流量接入切换',switchStep:[
                                    {
                                        switchStep:'应用检查',executeStep:'1',address:[
                                        {address:'南方基地',name:'应用状态检查进程1',way:''},
                                        {address:'东莞机房',name:'应用状态检查进程1',way:''}
                                                                                     ]
                                    },
                                    {
                                        switchStep:'数据复制状态检查',executeStep:'2',address:[
                                         {address:'南方基地',name:'应用状态检查进程1',way:''},
                                         {address:'东莞机房',name:'应用状态检查进程1',way:''},
                                         {address:'东莞机房',name:'应用状态检查进程1',way:''}
                                                                                      ]
                                    }
        ]
    }
];

出来的效果:

第一列的切换准备没合并是因为在两个不同的tbody里面吗?请问有其他什么办法吗?或者改变数据结构会不会简单点

【热门文章】
【热门文章】