html table 中的重复数据

Question

我在 AngularJS 中遇到 data-ng-repeat 有点复杂（对于像我这样的初学者）table。

我的数据是：

  $scope.test = [
       {store: "NYC store",
        comment: "comment1",
        prices: {
            "product1": "12",
            "product2": "10",
            "product3": "71"}
        },
       {store: "Texas store,
        comment: "comment2",
        prices: {
            "product1": "15",
            "product2": "9",
            "product3": "68"}
        },
      ];

table 应该类似于：

我尝试过的：

<table style=" border-collapse: collapse;" border="1">
    <tr>
        <th data-ng-repeat="data in test">{{ data.store }}</th>
    </tr>
    <tr data-ng-repeat="(key, val) in test[0].prices">
        <td>{{ val }}</td>
        <td>{{ key }}</td>
    </tr>
    <tr>
        <td data-ng-repeat="data in test">{{ data.comment }}</td>
    </tr>
</table>

但这里的问题是我不确定如何在这里重复所有映射，因为现在我所能做的就是只重复 test[0].prices 而不是所有数组元素 (i/e/所有地图）。

Answer 1

这里的问题并不是真正的 Angular 问题，而是如何将数据从数组循环到 table 的问题，该 table 的形状不同。

产品也不是数组，而是对象的属性列表。

  <table style=" border-collapse: collapse;" border="1">
    <tr>
        <th></th>
        <th data-ng-repeat="data in test">{{ data.store }}</th>
    </tr>
    <tr data-ng-repeat="(key, val) in test[0].prices">
        <td>{{ key }}</td>
        <td data-ng-repeat="data in test">{{data.prices[key]}}</td>
    </tr>
    <tr>
        <td></td>
        <td data-ng-repeat="data in test">{{ data.comment }}</td>
    </tr>
</table>

硒也https://docs.angularjs.org/api/ng/directive/ngRepeat

示例：http://jsbin.com/kedezup/3/edit?html,js,output

html table 中的重复数据

Repeated data in html table

html

javascript

html-table

angularjs

angularjs-ng-repeat