对于嵌套对象,角度 – 重复单个元素

发布时间：2020-12-17 08:04:44 所属栏目：安全来源：网络整理

导读：说我有一个对象，对应于与对象相对应的产品和值对应的对象，这些对象又具有对应于这些产品出售的价格点的键，以及对应于销售量的值。例如，如果我以$ 1销售10个小部件，以2美元销售5个小部件，我将拥有数据结构： { 'widget': {'1': 10,'2': 5} } 我想循环

说我有一个对象，对应于与对象相对应的产品和值对应的对象，这些对象又具有对应于这些产品出售的价格点的键，以及对应于销售量的值。

例如，如果我以$ 1销售10个小部件，以2美元销售5个小部件，我将拥有数据结构：

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

我想循环这个结构，并在一个表中生成行，如这个：

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

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

ng-repeat当前没有可能的方式来复杂的内部对象迭代(在python中可能的方式)。查看ng-repeat source code，并注意正则表达式匹配是：

(key，value)在集合中 – 并且它们推入密钥数组并分配给值列表，所以你不可能有一个复杂的重复悲伤…

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

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

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

另一件事 – 第二个解决方案将遍历数据集的可能方法(因为没有使用hasOwnProperty)。

我已经改进了这个Plunker(基于finishmove Plunker)的解决方案，以便使用angular.forEach，并显示该解决方案相当简单，但允许复杂的排序逻辑。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!