切换带角度复选框的动态表格列

时间:2013-06-26 18:07:19

标签: javascript angularjs

我正在学习Angular,我正在为webapp构建权限表。应用程序中有多个工具,不同的用户具有不同的权限。我想要复选框来控制表中显示的用户。

这是一个jsbin,为您展示演示:http://jsbin.com/epuziq/2/edit

我可以通过复选框来切换标题,但我正在努力避免如何隐藏与标题相关联的表格数据列。我可以更改JSON以适应任何解决方案。

有没有办法用Angular做到这一点?任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:3)

我将表格中填充的代码更改为以下内容并且工作正常!

<tr ng-init="headers = permissions.headers"
    ng-repeat="tabledata in permissions.tool1">
    <td>{{ tabledata.permission  }}</td>
    <td ng-show="headers[0].selected">{{ tabledata.userone }}</td>
    <td ng-show="headers[1].selected">{{ tabledata.usertwo }}</td>
    <td ng-show="headers[2].selected">{{ tabledata.userthree }}</td>
    <td ng-show="headers[3].selected">{{ tabledata.userfour }}</td>
    <td ng-show="headers[4].selected">{{ tabledata.userfive }}</td>
</tr>

此外,在您的用例中,将用户与权限级别关联起来更有意义,而不是相反。你可以把自己从这么糟糕的事情中解救出来。例如,以下集合对于用例来说就像是你的一块蛋糕。

"users" : [
    {
         "title": "User One",
         "filter": "userone",
         "selected": true,
         "permission 1" : yes,
         "permission 2" : yes,
         "permission 3" : no
    }
     ... and so on