Column join: HTML5 and Angular

Navigation
2

Well, I'm wondering how I can do this join with angularjs? I saw that it has ng-repeat-start and end, but I could not implement it.

    
asked by anonymous 22.02.2017 / 04:50

1 answer

3

The merge feature in HTML is rowspan .

  

HTML rowspan Attribute

     

Original: The rowspan attributes specifies the number of rows to cell should span.

     

Free Translation: The rowspan attribute specifies the number of rows a cell should occupy.

Considering 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 organizar function 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 rowspan and traversed the element that was formed ( documentos ) to create the other lines. Note that I created an additional ng-repeat that ignores the index record 0 so that the other rows are shown. Example working as follows: 

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><divng-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 in StackOverflow : Use of rowspan to group hierarchical data

    
22.02.2017 / 13:16
How to join records from a table distributed in multiple .sqlite files? AngularJS - Where to put Jquery / JavaScript functions