动态构建 html 表格行和列 ngrepeat答案

【问题标题】：Dynamically build html table rows and columns ngrepeat动态构建 html 表格行和列 ngrepeat
【发布时间】：2015-09-18 14:09:00
【问题描述】：

我对 Angular js 非常陌生，并且在使用 ngrepeat 构建 html 表时遇到了问题。我必须为角色和权限构建一个 html 表，在此我必须列出标题部分的所有操作，例如（显示、添加、编辑、删除、打印、电子邮件 ..），并且每一行我必须显示模块和如果该模块具有该操作，则每个操作下方的复选框。例如，某些模块将没有电子邮件选项，因此我们不应在该操作下显示复选框。请帮助我，这对我的学习目的也很有用。

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

* reperesents checkboxes

我从 web 服务获取了两个 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 数据在控制器中创建模型。然后你可以使用 ngChecked 指令来决定是否应该检查复选框：docs.angularjs.org/api/ng/directive/ngChecked
如果我理解正确的话，这里有一个类似于你所拥有的东西的 plunker，你需要 1 ng-repeat 用于标题，2 嵌套 ng-repeat 用于表的主体。关于ckeboxes，请参阅@MertMertce 写的内容。 plnkr.co/edit/01AztdZkKlBosj2oFFnf?p=preview
亲爱的 Dimma Gimms，感谢您的帮助。你能帮我做另一个改变吗？我需要额外的名为 show 的列，如果单击显示复选框，我需要检查该特定行中的所有复选框。再次感谢您的宝贵时间。
@PrabhuRaj 在 ngChecked 指令中也提出了该条件：例如：ngChecked="original_value || row_show_checked"
亲爱的 Dimma Gimms，代码没有按预期工作。如果模块没有列表选项，它也将复选框放在列表选项中。如果你有时间，请看看那个

标签： angularjs html-table angularjs-ng-repeat

【解决方案1】：

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

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

然后使用相同的标头 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>

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

Plunker 链接如下

http://plnkr.co/edit/I2MAUcPgBAUjvjfBHlFe?p=preview

【讨论】：

非常感谢 Yuvaraj