Column Junction: HTML5 and Angular

Question

Guys, I’m wondering how I can make this junction with the Angularjs? I saw that has the ng-repeat-start and the end, but I couldn’t implement.

Answer 1

The feature of joining lines in the HTML is the rowspan.

HTML rowspan Attribute

Original: The rowspan attribute specifies the number of Rows a Cell should span.

Free translation: The rowspan attribute specifies the number of lines a cell should occupy.

Considering the following JSON:

[
  {
    lab: 'Lab1',
    slogan: 'slogan 1',
    analista: 'Analista 1',
    documento: 'Documento 1'
  },
  {
    lab: 'Lab1',
    slogan: 'slogan 1',
    analista: 'Analista 2',
    documento: 'Documento 2'
  },
  {
    lab: 'Lab1',
    slogan: 'slogan 1',
    analista: 'Analista 3',
    documento: 'Documento 3'
  },
  {
    lab: 'Lab2',
    slogan: 'slogan 2',
    analista: 'Analista 4',
    documento: 'Documento 4'
  }
]

I created a function organizar that turns it into:

[
  {
    lab: 'Lab1',
    slogan: 'slogan 1',
    documentos: [{
      analista: 'Analista 1',
      documento: 'Documento 1'
    }, {
      analista: 'Analista 2',
      documento: 'Documento 2'
    }, {
      analista: 'Analista 3',
      documento: 'Documento 3'
    }]
  },
  {
    lab: 'Lab2',
    slogan: 'slogan 2',
    documentos: [{
      analista: 'Analista 4',
      documento: 'Documento 4'
    }]
  }
]

So I applied the rowspan and went through the element that was formed (documentos) to create the other lines. Note that I created a ng-repeat additional that ignores the index record 0 for the remaining lines to be shown. Example working below:

angular
  .module('meuModulo', []);

angular
  .module('meuModulo')
  .controller('MeuController', MeuController);

MeuController.$inject = [];

function MeuController() {
  var vm = this;

  iniciar();

  function iniciar() {
    var base = [{
        lab: 'Lab1',
        slogan: 'slogan 1',
        analista: 'Analista 1',
        documento: 'Documento 1'
      },
      {
        lab: 'Lab1',
        slogan: 'slogan 1',
        analista: 'Analista 2',
        documento: 'Documento 2'
      },
      {
        lab: 'Lab1',
        slogan: 'slogan 1',
        analista: 'Analista 3',
        documento: 'Documento 3'
      },
      {
        lab: 'Lab2',
        slogan: 'slogan 2',
        analista: 'Analista 4',
        documento: 'Documento 4'
      }
    ];
    ordenar(base);
  }

  function ordenar(base) {
    var organizados = {};
    vm.dados = [];

    angular.forEach(base, function percorrer(item) {
      if (angular.isUndefined(organizados[item.lab])) {
        organizados[item.lab] = {};
        organizados[item.lab].lab = item.lab;
        organizados[item.lab].slogan = item.slogan;
        organizados[item.lab].documentos = [];
      }

      organizados[item.lab].documentos.push({
        analista: item.analista,
        documento: item.documento
      });
    });

    for (var lab in organizados) {
      vm.dados.push(organizados[lab]);
    }
  }
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="meuModulo">
  <div ng-controller="MeuController as vm">
    <table>
      <tbody ng-repeat='dado in vm.dados'>
        <tr>
          <td rowspan="{{dado.documentos.length}}">{{dado.lab}}</td>
          <td rowspan="{{dado.documentos.length}}">{{dado.slogan}}</td>
          <td>{{dado.documentos[0].analista}}</td>
          <td>{{dado.documentos[0].documento}}</td>
        </tr>
        <tr ng-repeat='documento in dado.documentos' ng-if="$index > 0">
          <td>{{documento.analista}}</td>
          <td>{{documento.documento}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer to a similar question on Stackoverflow: Use of rowspan to group hierarchical data