Toggling dynamic table columns with checkboxes in angular

Question

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.

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

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.

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

Answer 1

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