AngularJS ng-重复对象数组

Question

我有一个带有2个数组的Object:

mainObject = {
  soccer: [],
  hockey: []
}

每个数组都包含不同数量的对象:

sportObject = {
  soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
  hockey: [{equipment: "skates"}]
}

我使用列表将每个对象打印到页面上,用"sport"分隔:

<ul ng-repeat="(sport, value) in sportObject">
  <li>{{sport}}</li> // Prints "soccer" or "hockey"

  <li ng-repeat="item in sportObject"></li> //  <-- one of my failed attempts
</ul>

我想将每个对象信息打印到li正确的运动名称下.

例如,共有4个对象,足球有3个,曲棍球有1个.

目前,每个项目在两项运动下都会重复出现.所以这两项运动都有4个项目.如何使用ng-repeat仅打印属于正确运动标题的设备？

结果应如下所示:

足球

• 设备:防滑钉
• 衬衫:球衣
• 球队:阿森纳

曲棍球

• 装备:溜冰鞋

Answer 1

以下应该可以解决问题：

<ul ng-repeat="(sport, value) in sportObject">
  <li>{{sport}}
    <ul>
      <li ng-repeat="detail in value">
        <span ng-repeat="(detailkey, detailvalue) in detail">
          {{detailkey}} - {{detailvalue}}
        </span>
      </li>
    </ul>
  </li>
</ul>

请注意，您必须进行3次迭代：

• 第一个超过原始对象
• 每个原始对象值中的第二个数组对象
• 数组内对象的第三个

这是适合您的工作版本：https : //plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p=preview