Angularjs 动态构建html表行和列

我是angular js的新手，在使用ngrepeat构建html表时遇到了问题。我必须为角色和权限建立一个html表格，在这个表格中，我必须在标题部分列出所有操作，如（显示、添加、编辑、删除、打印、电子邮件…），每行我必须显示模块，如果模块有该操作，则在每个操作下显示一个复选框。例如，某些模块没有电子邮件选项，因此我们不应在该操作下显示复选框。请帮我做这件事，这对我的学习目的也很有用

*------------------------------------------------------------*   
| Module       | Show | Add  | Edit | Delete | Print | Email |
+--------------|------|------|------|--------|-------|-------+
| Purchase     | *    |  *   |  *   |   *    |   *   |   *   |
|--------------|------|------|------|--------|-------|-------|
| Sales        | *    |  *   |  *   |   *    |   *   |   *   |
|--------------|------|------|------|--------|-------|-------|
| XXXXXX       | *    |  *   |  *   |   *    |       |       |
|--------------|------|------|------|--------|-------|-------|
| xxx-Reports  | *    |      |      |        |   *   |   *   |
*------------------------------------------------------------*   

* reperesents checkboxes

我从webservice获得了两个json，一个用于标题，另一个用于模块和操作

Header 

{"Headers":[{"action_id":0,"name":"list"},{"action_id":1,"name":"Add"},{"action_id":2,"name":"Edit"},{"action_id":3,"name":"Delete"},{"action_id":4,"name":"Email"},{"action_id":4,"name":"Print"}]}

Body

{"Purchase":[{"name":"list","action_id":0,"status":1},{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0}],"Sales":[{"name":"list","action_id":0,"status":1},{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0}],"DC":[{"name":"Add","action_id":1,"status":1},{"name":"Edit","action_id":2,"status":0},{"name":"Delete","action_id":3,"status":0},{"name":"Email","action_id":4,"status":0},{"name":"Print","action_id":5,"status":0}]}

如果单击“显示”复选框，则应选中所有其他相应的操作复选框

---

我在构建列方面没有问题，但我不知道如何构建行并在适当的列上放置复选框。

首先，您必须构建直截了当的表标题。只需在json头上使用ngrepeat

    <thead>
        <tr>
            <th> Module </th>
            <th ng-repeat = "key in head.Headers" > {{key.name}} </th>
        </tr>
    </thead>

模块
{{key.name}

然后使用相同的头json，遍历每个模块，找到该操作是否适用于该特定模块，并显示复选框

<tbody>
    <tr ng-repeat = "(key_body,val_body) in jsonbody">
        <td>{{key_body}}</td>
        <td ng-repeat = "key in head.Headers">
        <input type="checkbox" ng-modal="output[key_body][key.name]"  ng-if = "(val_body|filter:key.name:true).length>0" >
        </td>
    </tr>
</tbody>

{{key_body}}

这可能不是一个专业的方法，但它会解决你的目的

Plunker链接如下所示

---

使用解析的json数据在控制器中创建模型。然后，您可以使用ngChecked指令来决定是否应该选中复选框：如果我理解正确，这里有一个类似于您所拥有的东西的plunker，您需要1个ng repeat作为标题，2个嵌套的ng repeat作为表体。关于这些盒子，请看@MertMertce写了什么。亲爱的迪玛·金姆斯，谢谢你的帮助。请你再帮我换一件好吗。我需要一个名为show的额外列，如果选中show复选框，我需要选中该特定行中的所有复选框。再次感谢您的时间。@PrabhuRaj在ngChecked指令中也提出了这样的条件：例如：ngChecked=“original_value | | row_show_checked”亲爱的Dimma Gimms，代码没有按预期工作。如果模块没有列表选项，它也会将复选框置于列表选项中。如果你有时间，请看一看，非常感谢Yuvaraj