切换带有角形复选框的动态表列 [英] Toggling dynamic table columns with checkboxes in angular

问题描述

我正在学习Angular，并且正在为Webapp构建权限表.该应用程序内有多种工具，不同的用户具有不同的权限.我希望复选框控制表中显示的用户.

I'm learning Angular, and I am building a permissions table for a webapp. There are multiple tools within the app and different users have different permissions. I want checkboxes to control what users are being shown in the table.

以下是一个jsbin，向您展示了一个演示: http://jsbin.com/epuziq/2/edit

Here is a jsbin to show you a demo: http://jsbin.com/epuziq/2/edit

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

I can get the checkboxes to toggle the headers, but I'm struggling on how to hide the columns of table data associated with the header. I can change the JSON to fit any solution.

有没有办法用Angular做到这一点?感谢您的帮助.

Is there a way to do this with Angular? Any help is appreciated.

推荐答案

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

I changed the code which populates in your table to the below and it works fine!

<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>

此外，在您的用例中，将用户与权限级别进行关联更有意义，而不是反过来&您本可以避免陷入如此混乱的境地.例如，以下集合对于您自己的用例来说简直是小菜一碟.

Also, in your use case it makes more sense in making the association of users with permission levels and not the other way round & you could have saved yourself from such a mess. For example, the following collection would have been a piece of cake for a use case as yours.

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

这篇关于切换带有角形复选框的动态表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！