AngularJS/HTML 表格格式

Question

对此有点噩梦 - 我正在尝试仅使用 ng-repeat 和 HTML 来显示 $http 数据表。到目前为止我有这个：

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

但是它会输出这个：

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

（我故意不将其格式化以尽可能多地给您一个想法）如果您可以想象上面的内容，但每个单元格周围都有边框，那么边框宽度由每个数字或字符串的长度定义 对于每个单元格。

我期待<table>、<tr> 和<td> 自动创建列宽，这可能取决于每列中最宽单元格的宽度，但没有列有合适的宽度，每个单元格都是它自己的..

Answer 1

将ng-repeat 放入您的<tr> 标记中。

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