Question

我对角度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}]}

如果我们点击显示复选框，则应选中所有其他相应的操作复选框。

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

Answer 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

动态构建html表行和列ngrepeat

1 个答案: