这是我的json数据：
{
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [
{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [
{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [
{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}
]
}
]
}]}
我想遍历我的对象参数，在数组roleModulePermissions中我想迭代参数moduleRead，moduleWrite，moduleCreate这样我得到一个行内的3个复选框，显示这个参数的值我应该如何编写html脚本来访问数据就像我指定的那样。我希望数据进入bootstrap行面板
您可以创建嵌套的table并实现此目的。
这是工作片段
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script>
(function() {
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.roles = {
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}]
}]
}]
};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<table class="table">
<tr>
<th>Module</th>
<th>Sub Module</th>
</tr>>
<tr ng-repeat="module in roles.module">
<td col-span="2">{{module.pageName}}</td>
<td ng-repeat="submodule in module.subModules">
<table class="table">
<tr>
<td>{{submodule.pageName}}</td>
<td ng-repeat="permission in submodule.roleModulePermissions">
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleRead">Read</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleWrite">Write</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleCreate">Create</label>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>