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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With