ng-repeat to duplicate tds

Question

ng-repeat to duplicate tds

Navigation

#1 by (1 votes)

1

Hello, I'm trying to build a table, but specifically I have a problem with a row, in which I need this piece:

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

I need this to be generated dynamically, in my case with this ng-repeat="usu in aTipoUsuarios" would be generated 2 times just what I need.

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

I have tried everything but I can not manage to duplicate that piece by means of a ng-repeat

angularjs

asked by yavg 13.02.2017 в 02:06

source

1 answer

Computational cost of maintaining the instance of a variable in Java How can I calculate the letter NIF of a DNI?

score 1 · Answer 1

Instead of 3 TDs with the words hard-coded, you can put one with the same information but generated dynamically.

This dynamic list would have a base of 3 elements (first, second and third, with the respective information of classes and titles). This list, you repeat it as many times as elements have a UserType. So, for example, if you have 2 types of users, you would have a list with 6 elements and, consequently, 6 TDs.

I pass the code example:

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"
    });
  }

}

I also updated the fiddle: link