javascript - html表格中的重复数据

Question

我在 AngularJS 中使用 data-ng-repeat 为一个有点复杂(对于像我这样的初学者)的表而苦苦挣扎。

我的数据是:

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

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

Answer 1

这里的问题实际上并不是 Angular 的问题，而是一个关于如何将数组中的数据循环到以不同方式构建的表中的问题。

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

  <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