在嵌套的对象数组上使用 ng-repeat

Question

下面是我的 JSON 对象，我试图在 html table.

中显示相同的对象

$scope.results = {
  "data": [
    {
      "name": "Sam",
      "details": [
        {
          "official": [
            {
              "address1": "Link road",
              "pincode": 76755554
            },
            {
              "address1": "K main road",
              "pincode": 9766565
            }
          ]
        },
        {
          "name": "John",
          "details": [
            {
              "official": [
                {
                  "address1": "Old college road",
                  "pincode": 11111
                },
                {
                  "address1": "near east side",
                  "pincode": 6555446
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

我已经使用 ng-repeat 实现了以下输出。但我没有得到预期的结果

这是我试过但卡住了的代码JSFIDDLE

关于如何实现我的预期结果的任何想法都将非常有帮助。

Answer 1

如果您的数据结构在级别更多时会变得更复杂，您可能需要稍微调整一下，但这应该重新格式化您的数据并将所有内容扁平化为一组没有所有不同级别的人。

$scope.peopleFlat = [];

function flattenPeople(people) {
    people.forEach((person) => {
        $scope.peopleFlat.push({
           name: person.name,
           addresses: person.details[0].official
        });

        if (person.details.length > 1) {
            flattenPeople([person.details[1]]);
        }
    });
}

flattenPeople($scope.people);

然后您可以结合使用 ng-repeat-start 和 ng-repeat-end 来使用 rowspan 而不是嵌套的 <table> 元素。

<table class="table table-bordered table-condensed">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Pincode</th>
    </tr>
    <tr ng-repeat-start="person in peopleFlat">
        <td rowspan="{{person.addresses.length || 1}}">{{person.name}}</td>
        <td>{{person.addresses.length ? person.addresses[0].address1 : ''}}</td>
        <td>{{person.addresses.length ? person.addresses[0].pincode : ''}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="address in person.addresses.slice(1)">
        <td>{{address.address1}}</td>
        <td>{{address.pincode}}</td>
    </tr>
</table>

在嵌套的对象数组上使用 ng-repeat

Using ng-repeat on nested array of objects

angularjs

angularjs-ng-repeat