Question

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

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

AngularJS / HTML表格式

1 个答案: