Replicate information through the columns of the JS Angular table

Question

Replicate information through the columns of the JS Angular table

Navigation

#1 by (4 votes)

0

I have a table where I need to duplicate the table columns when the ID change in the received array.

The array consists of result=[{"id":"1","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"}, {"id":"1","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"},{"id":"2","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"},{"id":"2","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"}]

<table  class="table table-striped">
        <tr>
            <th></th>
            <th>Inicio</th>
            <th>Fim</th>
            <th>Total</th>
        </tr>
        <tr ng-repeat="r in result">
            <td align="center">{{r.Dia}}</td>
            <td align="center">{{r.inicial}}</td>
            <td align="center">{{r.final}}</td>
            <td align="center">{{r.DIAS}}</td>
        </tr>
    </table>

To get something like this:

Table:

html angularjs ng-repeat

asked by anonymous 27.10.2015 / 13:47

1 answer

how to send a kind of form without button? Remove unwanted margin below image

score 4 · Answer 1

To do it the way you need to recommend that you build the object already in the way you need it on the server, since it will be practically fixed data, id = 1 and id = 2 where id = 2 must be right of id = 1. The result is the following: id="1", ..., "id2"="2", ...}, {"id1"="1", ..., "id2"="2" ...}]

The ellipses represent the remaining properties, respectively, I recommend only changing their nomenclature to identify what would be id 1 and id 2.

HTML:

     <tr>
        <th></th>
        <th>Inicio</th>
        <th>Fim</th>
        <th>Total</th>
        <th></th>
        <th>Inicio</th>
        <th>Fim</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="r in result">
        <td align="center">{{r.Dia1}}</td>
        <td align="center">{{r.inicial1}}</td>
        <td align="center">{{r.final1}}</td>
        <td align="center">{{r.DIAS1}}</td>
        <td align="center">{{r.Dia2}}</td>
        <td align="center">{{r.inicial2}}</td>
        <td align="center">{{r.final2}}</td>
        <td align="center">{{r.DIAS2}}</td>
    </tr>

In my view this would be a simple way to be resolved as your new explanation.