Skip to main content
Se agrega el código y un ejemplo en el fiddle
Origen Enlace
malvarez
  • 301
  • 1
  • 10

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/

Si no fui claro, mañana puedo hacer el código y pasarlo. Espero te sirva!

Paso el ejemplo de código:

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/

Corrección de la explicación
Origen Enlace
malvarez
  • 301
  • 1
  • 10

Podes generar una listaEn lugar de 3 TDs con las palabras hard-coded, podés poner uno solo con la misma información pero generada dinámicamente que contenga el array ["primero".

Esta lista dinámica tendría una base de 3 elementos (primero, "segundo"segundo y tercero, "tercero"] repetidocon la respectiva información de clases y títulos). Esta lista, la repetis tantas veces como elementos tenga aTipoUsuarios. Y esto lo usas en un ng-repeat en un único tdEntonces, por ejemplo, si tenés 2 tipos de usuarios, te quedaría una lista con 6 elementos y, por consiguiente, 6 TDs.

AhoraSi no puedo probarlo y pasartefui claro, mañana puedo hacer el código y pasarlo. Espero que como idea de solución, te sirva. Cualquier cosa consultame!

Podes generar una lista dinámicamente que contenga el array ["primero", "segundo", "tercero"] repetido tantas veces como elementos tenga aTipoUsuarios. Y esto lo usas en un ng-repeat en un único td.

Ahora no puedo probarlo y pasarte el código. Espero que como idea de solución, te sirva. Cualquier cosa consultame!

En lugar de 3 TDs con las palabras hard-coded, podés poner uno solo con la misma información pero generada dinámicamente.

Esta lista dinámica tendría una base de 3 elementos (primero, segundo y tercero, con la respectiva información de clases y títulos). Esta lista, la repetis tantas veces como elementos tenga aTipoUsuarios. Entonces, por ejemplo, si tenés 2 tipos de usuarios, te quedaría una lista con 6 elementos y, por consiguiente, 6 TDs.

Si no fui claro, mañana puedo hacer el código y pasarlo. Espero te sirva!

Origen Enlace
malvarez
  • 301
  • 1
  • 10

Podes generar una lista dinámicamente que contenga el array ["primero", "segundo", "tercero"] repetido tantas veces como elementos tenga aTipoUsuarios. Y esto lo usas en un ng-repeat en un único td.

Ahora no puedo probarlo y pasarte el código. Espero que como idea de solución, te sirva. Cualquier cosa consultame!