ng-在嵌套对象上重复单个元素

Question

假设我有一个对象，其键对应于产品，值对应于对象，对象又具有对应于那些产品已售出的价格点的键，以及对应于所售数量的值。

例如，如果我以1美元的价格出售10个小部件，以2美元的价格出售5个小部件，那么我将具有以下数据结构：

{ 'widget': {'1': 10, '2': 5} }

我想遍历这种结构并在这样的表中生成行：

thing   price  amount
---------------------
widget  $1     10
widget  $2     5

在Python中，可以嵌套列表推导来遍历这样的列表数据结构。使用ng-repeat可以做到吗？

Answer 1

ng-repeat目前尚不具备在对象内部进行复杂迭代的可能方法（在python中是可能的）。查看ng-repeat
源代码，并注意匹配的正则表达式为：

(key, value) in collection -并且它们将它们推入键数组并分配给值列表，因此，您可能很难拥有复杂的ng-repeat
…

基本上，这里已经 回答 了两种类型的解决方案：

1. 嵌套ng-repeat类似于第一个答案。
2. 像建议的第二个答案一样，重建数据对象以适合1 ng-repeat。

我认为解决方案2更好，因为我希望将排序和编码逻辑保留在控制器中，而不是在HTML文档中进行处理。这也将允许进行更复杂的排序（即基于价格，数量，widgetName或其他逻辑）。

另一件事-第二个解决方案将迭代数据集的可能方法（因为在那里没有使用 hasOwnProperty ）。

为了使用angular.forEach并显示该解决方案相当简单，但允许使用复杂的排序逻辑，我改进了此
Plunker （基于finishingmove
Plunker）中的解决方案。

$scope.buildData = function() {

  var returnArr = [];

  angular.forEach($scope.data, function(productData, widget) {
      angular.forEach(productData, function( amount, price) {
        returnArr.push( {widgetName: widget, price:price, amount:amount});            
      });
  });
   //apply sorting logic here
  return returnArr;
};
$scope.sortedData = $scope.buildData();

然后在您的控制器中：

<div ng-controller="MyCtrl">
    <table>
      <thead>
        <tr>
          <td>thing</td>
          <td>price</td>
          <td>amount</td>
        </tr>
      </thead>
      <tbody>
      <tr ng-repeat="item in sortedData">
        <td>{{ item.widgetName }}</td>
        <td>{{ item.price|currency }}</td>
        <td>{{ item.amount }} </td>
        </tr>
      </tbody>
    </table>
</div>