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>

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

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

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

结果如下：

足球

设备：夹板
shirt：jersey
团队：阿森纳

曲棍球

装备：冰鞋

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

Answer 2

您可以在key指令中使用value和ng-repeat，如下所示。

<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 here供您查看和编辑：

您还可以嵌套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>

AngularJS ng-重复对象数组

2 个答案: