AngularJS中ng-repeat如何对对象数组进行唯一性循环？

Question

我有一个包含2个数组的对象：

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>

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

中。

例如，共有4个对象，足球有3个，曲棍球有1个。

目前，每个项目都会在两种运动中重复。因此，两种运动都有4个项目。如何使用ng-repeat仅打印属于正确运动标题的装备？

结果应如下所示：

足球

• 设备：足球鞋
• 衬衫：球衣
• 团队：阿森纳

曲棍球

• 设备：溜冰鞋

- bruh

---

尝试 item in sport。 - Claies

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

- GPicazo

---

我终于可以说，我明白了ng-repeat的工作原理。我没有意识到我可以如此深层嵌套。谢谢！ - bruh

Answer 2

您可以在下面的代码中使用ng-repeat指令中的key和value。

<ul ng-controller="SportController">
  <strong>Soccer</strong>
  <li ng-repeat="(key,value) in sportObject.soccer">
    {{value}}
  </li>

  <strong>Hockey</strong>
  <li ng-repeat="(key,value) in sportObject.hockey">
    {{value}}
  </li>
</ul>

附加的线路连接：

var app = angular.module("sportApp", []);

app.controller("SportController", function($scope) {
    $scope.sportObject = {
    soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}],
    hockey: [{equipment: "skates"}]
  }
});

我为您创建了一个示例plunkr，方便您查看和编辑。

您还可以嵌套使用ng-repeat指令。

<ul ng-controller="SportController">
  <li ng-repeat="(sportName, sportValue) in sportObject">
    {{sportName}}
    <ul ng-repeat="(key, val) in sportValue">
      <li>{{val}}</li>
    </ul>
  </li>
</ul>

- Darren