javascript - 使用角度复选框切换动态表列

Question

我正在学习 Angular，并且正在为 web 应用程序构建权限表。应用程序中有多种工具，不同的用户拥有不同的权限。我想要复选框来控制表格中显示的用户。

这是一个 jsbin 给你演示：http: //jsbin.com/epuziq/2/edit

我可以使用复选框来切换标题，但我正在努力隐藏与标题关联的表数据列。我可以更改 JSON 以适应任何解决方案。

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

Answer 1

我将填充在您的表格中的代码更改为下面的代码，它工作正常！

<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