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

前端之家收集整理的这篇文章主要介绍了对于嵌套对象,角度 – 重复单个元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
说我有一个对象,对应于与对象相对应的产品和值对应的对象,这些对象又具有对应于这些产品出售的价格点的键,以及对应于销售量的值。

例如,如果我以$ 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>

猜你在找的Angularjs相关文章