AngularJS/HTML table formatting

Question

Having a bit of a nightmare with this - I'm trying to display a table of $http data using only ng-repeat and HTML. I have this so far:

<table border="1" style="width:100%" ng-repeat="data in boxData">
            <tr>
            <td>{{data.entity}}</td>
            <td>{{data.security.securityID}}</td>
            <td>{{data.security.identifiers[0].value}}</td>
            <td>{{data.security.identifiers[1].value}}</td>
            <td>{{data.security.identifiers[2].value}}</td>
            <td>{{data.depot}}</td>
            <td>{{data.date}}</td>
            <td>{{data.date}}</td>
            <td>{{data.primeBroker}}</td>
            <td>{{data.activity}}</td>
            <td>{{data.timestamp}}</td>
            <td>{{data.sequence}}</td>
            <td>{{data.activity}}</td>
            <td>{{data.balance[0].value}}</td>
            <td>{{data.balance[1].value}}</td>
            <td>{{data.balance[2].value}}</td>
            <td>{{data.balance[3].value}}</td>
            <td>{{data.balance[4].value}}</td>
            </tr>
            </table>

however it outputs this:

02  50167   42630125    US518252CR03    518252CR0   CCT 20160111        20160111    N   UPDATE  2016-02-03T20:01:39.015 4   UPDATE  -2352               
02  81106   7918922 IT0000062072    044998912   BNY 20160111    20160111    N   UPDATE  2016-02-03T20:01:42.158 4   UPDATE  532346              
01  51024   36530971    US404119BK49    404119BK4   CCT 20160118    20160118    N   UPDATE  2016-02-03T20:01:31.397 4   UPDATE  3886                
02  50555   39729417    US57183MCT53    57183MCT5   900 20160111    20160111    N   UPDATE  2016-02-03T20:01:39.661 20  UPDATE  66402000    -51402000

(I have deliberately not formatted this to give you as much of an idea as possible) If you can imagine the above but with a border around each cell, the border width defined by how long each number or string is for each cell.

I was expecting <table>, <tr> and <td> to automatically create column widths possibly depending on the width of the widest cell in each column, but no column has an appropriate width, each cell is its own..

Can you please add a link of jsfiddle which can give a clear idea about the code. — Jaffer Wilson
– Jaffer Wilson, Commented Feb 4, 2016 at 9:56

Linh Pham · Accepted Answer · 2016-02-04 09:55:42Z

2

Put the ng-repeat in your <tr> tag.

<table border="1" style="width:100%">
    <tr ng-repeat="data in boxData">
        <td>{{data.entity}}</td>
        <td>{{data.security.securityID}}</td>
        <td>{{data.security.identifiers[0].value}}</td>
        <td>{{data.security.identifiers[1].value}}</td>
        <td>{{data.security.identifiers[2].value}}</td>
        <td>{{data.depot}}</td>
        <td>{{data.date}}</td>
        <td>{{data.date}}</td>
        <td>{{data.primeBroker}}</td>
        <td>{{data.activity}}</td>
        <td>{{data.timestamp}}</td>
        <td>{{data.sequence}}</td>
        <td>{{data.activity}}</td>
        <td>{{data.balance[0].value}}</td>
        <td>{{data.balance[1].value}}</td>
        <td>{{data.balance[2].value}}</td>
        <td>{{data.balance[3].value}}</td>
        <td>{{data.balance[4].value}}</td>
    </tr>
</table>

answered Feb 4, 2016 at 9:55

Linh Pham

3,02527 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

notAChance Over a year ago

Thanks I'll give this a go.

notAChance Over a year ago

Brilliant, I'm thankful there are smarter people than me out there! Will accept when the timer runs down :)

Collectives™ on Stack Overflow

AngularJS/HTML table formatting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related