NG-不断重复嵌套对象的单个元素 [英] ng-repeat a single element over nested objects

问题描述

说我有一个相应的产品及相应的对象从而具有相应的价格点是那些产品已经卖出键的值键和相应的值，以销售金额的对象。

Say I have an object with keys corresponding to products and values corresponding to objects which in turn have keys corresponding to price points at which those products have sold, and values corresponding to amount sold.

例如，如果我卖出了$ 110的小部件，并在$ 2 5小部件，我有数据结构：

For example, if I sold 10 widgets at $1 and 5 widgets at $2, I'd have the data structure:

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

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

I'd like to loop over this structure and generate rows in a table such as this one:

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

在Python中它可以嵌套列表COM prehensions遍历这样的列表中的数据结构。将这样的事情用NG-重复是可能的？

In Python it's possible to nest list comprehensions to traverse lists data structures like this. Would such a thing be possible using ng-repeat?

推荐答案

纳克重复目前还没有一个可行的办法里面对象的复杂迭代（这是可能在Python的方式）。退房的NG-重复源$ C ​​$ C 并注意匹配的正则表达式前pression是：

ng-repeat does not currently have a possible way to complex iterate inside objects (the way it's possible in python). Check out the ng-repeat source code and note that the regex expression matched is:

（键，值）集合 - 和他们推入键阵列，并分配给值列表，所以你不能可能有一个复杂的NG-重复可悲...

(key, value) in collection - and that they push into the key array and assign to the value list, and so you cannot possibly have a complex ng-repeat sadly...

有两种基本类型本来就已经解决方案回答的位置：

There are basically 2 types of solutions which were already answered here:

1. 像第一个答案嵌套NG-重复建议。


2. 重新构建你的数据对象，以适应1纳克重复，如第二个答案建议。

我觉得解决方案2是因为我喜欢让我的排序与放越好;编码逻辑控制器里面，在HTML文档中不与它打交道。这也将让更多的复杂的排序（即根据价格，数量，widgetName或其他一些逻辑）。

I think solution 2 is better as I like to keep my sorting & coding logic inside the controller, and not deal with it in the HTML document. This will also allow for more complex sorting (i.e based on price, amount, widgetName or some other logic).

另一件事 - 第二个解决方案将遍历数据集的可能方法（如的hasOwnProperty 不习惯那里）

Another thing - the second solution will iterate over possible methods of a dataset (as hasOwnProperty wasn't used there).

我已经改善了这个 Plunker解决方案（基于上，以便使用angular.forEach，并表明该溶液是相当简单，但允许对复杂的排序逻辑finishingmove Plunker）

I've improved the solution in this Plunker (based on the finishingmove Plunker) in order to use angular.forEach and to show that the solution is rather simple but allows for complex sorting logic.

$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();

，然后在你的控制器：

and then in your controller:

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

这篇关于NG-不断重复嵌套对象的单个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！