Si no fui claro, mañana puedo hacerPaso el ejemplo de código y pasarlo. Espero te sirva!:
HTML:
<div ng-controller="MyCtrl">
<table border='1'>
<tr>
<th rowspan="3">Tipo de Contenido</th>
<th colspan="{{aTipoUsuarios.length * 3}}">
Tipo de Usuarios
</th>
</tr>
<tr>
<td ng-repeat="usu in aTipoUsuarios" colspan="3">
{{usu}}
</td>
</tr>
<tr>
<td ng-repeat="columna in aColumnas"><i class='glyphicon {{columna.clasesCss}}' tile='{{columna.title}}'>{{columna.titulo}}</i></td>
</tr>
<tr>
<tr ng-repeat="rol in aRoles">
<td>{{rol.tipo_contenido}}</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
JS:
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.aRoles = [{
"tipo_contenido": "articulos",
"tipo_usuario": {
"administrador": {
"escritura": true,
"lectura": true,
"eliminacion": true
},
"reportante": {
"escritura": true,
"lectura": true,
"eliminacion": true
}
}
}, {
"tipo_contenido": "informacion",
"tipo_usuario": {
"administrador": {
"escritura": true,
"lectura": true,
"eliminacion": true
},
"reportante": {
"escritura": true,
"lectura": true,
"eliminacion": true
}
}
}, ]
$scope.aTipoUsuarios = Object.keys($scope.aRoles[0].tipo_usuario);
$scope.aColumnas = [];
for (var i = 0; i < $scope.aTipoUsuarios.length; i++) {
$scope.aColumnas.push({
titulo: "primero",
clasesCss: "glyphicon-book",
title: "Permiso de Lectura"
});
$scope.aColumnas.push({
titulo: "segundo",
clasesCss: "glyphicon-pencil",
title: "Permiso de Escritura"
});
$scope.aColumnas.push({
titulo: "tercero",
clasesCss: "glyphicon-trash",
title: "Permiso de Eliminación"
});
}
}
También actualicé el fiddle: http://jsfiddle.net/q4wrkpkb/13/