在html表中重复数据

Question

我在data-ng-repeat与AngularJS挣扎有点复杂（像我这样的初学者）桌子。

我的数据是：

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

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

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>

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

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