1

http://jsfiddle.net/q4wrkpkb/

introducir la descripción de la imagen aquí

hola, estoy intentando construir una tabla, pero específicamente tengo un problema con una fila, en la que necesito que este pedazo:

<td ><i class='glyphicon glyphicon-book' tile='Permiso de Lectura'>primero</i></td>
<td ><i class='glyphicon glyphicon-pencil' tile='Permiso de Escritura'>segundo</i></td> 
<td ><i class='glyphicon glyphicon-trash' tile='Permiso de Eliminación'>tercero</i></td>

Necesito que esto sea generado dinámicamente, en mi caso con esto ng-repeat="usu in aTipoUsuarios" se generaria 2 veces justo lo que necesito.

<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>  

<!--Aqui necesito usar el ng-repeat ng-repeat="usu in aTipoUsuarios" 
para que se muestre esto en mi caso 2 veces-->

    <td ><i class='glyphicon glyphicon-book' tile='Permiso de Lectura'>primero</i></td>
    <td ><i class='glyphicon glyphicon-pencil' tile='Permiso de Escritura'>segundo</i></td>
    <td ><i class='glyphicon glyphicon-trash' tile='Permiso de Eliminación'>tercero</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>

He intendado todo pero no consigo, lograr duplicar ese pedazo por medio de un ng-repeat

introducir la descripción de la imagen aquí

1
  • revisa mi respuesta porfavor Commented el 13 feb. 2017 a las 3:19

1 respuesta 1

1

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.

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/

2
  • 1
    necesito, acomodarlo tal cual a esa estructura, o quizas no te entienda
    – yavg
    Commented el 13 feb. 2017 a las 1:29
  • @yavg, Ahí actualicé la explicación. Avisame si es lo que estás necesitando.
    – malvarez
    Commented el 13 feb. 2017 a las 12:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.