ng-在嵌套对象上重复单个元素 [英] ng-repeat a single element over nested objects

问题描述

假设我有一个对象，其键对应于产品，值对应于对象，而对象又具有对应于这些产品的销售价格点的键，以及对应于销售量的值.

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

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

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

物价金额---------------------小部件 $1 10小部件 $2 5

在 Python 中，可以嵌套列表推导式来遍历这样的列表数据结构.使用 ng-repeat 可以实现这样的事情吗?

解决方案

ng-repeat 目前没有在对象内部进行复杂迭代的可能方法(在 Python 中是可能的).查看 ng-repeat 源代码 并注意匹配的正则表达式是:

(key, value) in collection - 它们推入键数组并分配给值列表，因此您不可能有一个复杂的 ng-悲伤地重复...

基本上有两种类型的解决方案已经回答:

1. 嵌套 ng-repeat 就像第一个建议的答案一样.
2. 重建您的数据对象以适应 1 ng-repeat，就像建议的第二个答案一样.

我认为解决方案 2 更好，因为我喜欢保持我的排序 &控制器内部的编码逻辑，而不是在 HTML 文档中处理它.这也将允许更复杂的排序(即基于价格、数量、widgetName 或其他一些逻辑).

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

我改进了这个 Plunker 中的解决方案(基于finishingmovePlunker) 以便使用 angular.forEach 并表明该解决方案相当简单但允许复杂的排序逻辑.

$scope.buildData = function() {var returnArr = [];angular.forEach($scope.data, function(productData, widget) {angular.forEach(产品数据，功能(金额，价格){returnArr.push( {widgetName: widget, price:price, amount:amount});});});//这里应用排序逻辑return returnArr;};$scope.sortedData = $scope.buildData();

然后在您的控制器中:

<表格><头><tr><td>东西</td><td>价格</td><td>金额</td></tr></thead><tr ng-repeat="排序数据中的项目"><td>{{ item.widgetName }}</td><td>{{ item.price|currency }}</td><td>{{ item.amount }} </td></tr></tbody>

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.

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

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?

解决方案

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:

(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. Nested ng-repeat like the first answer suggested.
2. Rebuilding your data object to fit 1 ng-repeat like the second answer suggested.

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

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

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