html表中的重复数据答案

【问题标题】：Repeated data in html tablehtml表中的重复数据
【发布时间】：2018-06-11 23:32:02
【问题描述】：

我正在与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>

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

【问题讨论】：

你有没有固定的产品？
首先将产品提取到单独的数组中。但最好首先规范您的数据结构。

标签： javascript html angularjs html-table angularjs-ng-repeat

【解决方案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

【讨论】：