<table class="table-striped table-bordered table-condensed">
<tbody>
<tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions()">
<td ng-repeat="i in [0,1,2]" class="col-xs-2">
<span>
<input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission($parent.$index+i)">
{{vm.parent.getPermissionTitle($parent.$index+i) || " "}}
</span>
</td>
</tr>
</tbody>
</table>
Currently, this is the AngularJS code I am working on. The JSON data structure I am dealing with includes various users, categories, and permissions:
{
"Admin": {
"category": "admin",
"permission": "admin"
},
"user": {
"category": "user",
"permission": "user"
}
}
The vm.getAllPermissions() function retrieves all the data. My goal is to categorize the users and permissions by displaying the categories within ui-tab components, and listing the permissions under each tab in a table format.
I attempted the following approach:
var permissionArray = [];
Object.keys(vm.getAllPermissions).map(function(category, key) {
for(var key in vm.getAllPermissions) {
if(vm.getAllPermissions.hasOwnProperty(key)) {
permissionArray.push(category,key);
}
}
});
While the code snippet above doesn't work as intended, it outlines my objective. The desired layout is depicted in this mockup: https://i.sstatic.net/6mkzx.png
The expected outcome includes an "admin" category tab at the top, with a list of permissions displayed as checkboxes within the tab. To achieve this, I believe passing the category as a parameter to vm.parent.getAllPermissions is necessary. However, my proficiency in Angular and JavaScript is limited, which is why I am seeking guidance on this matter.