table 中的 ng-repeat-start 嵌套对象

Question

我正在尝试使用 table 以下列格式显示以下信息。

这是一个 plnkr http://plnkr.co/edit/iYEVqUOU3aS4y0t9L1Qa?p=preview

$scope.persons = [
    {
     "name":"Mandy",
     "homes":[
            {
                "location":"California",
                "size":"medium",
                "furniture":[
                    {
                        "name":"couch",
                        "color":"white"
                    },
                    {
                        "name":"table",
                        "color":"black"
                    }
                ]
            }
        ]
      }
  ]

和html

<div ng-controller="ModalDemoCtrl">

<table class="table">
  <thead>
    <th>Name</th>
    <th>House</th>
    <th>Furniture</th>
  </thead>
  <tbody>
    <tr ng-repeat="person in persons">
      <td>{{person.name}}</td>
      <td ng-repeat-start="home in person.homes">
        <ul>
          <li>{{home.location}}</li>
        </ul>  
      </td>
      <td ng-repeat-end>
         <ul ng-repeat="furniture in home.furniture">
          <li>{{furniture.name}}</li>
        </ul> 
      </td>
    </tr>
  </tbody>
</table>


</div>

这适用于 1 个家庭和多个家具，但我运行遇到 ui/table 问题，当有超过 1 个家庭（以及多个家具）时。

我试过将 ng-repeat-start 移动到 ul 元素，但是 angular 抱怨说当我这样做时找不到 ng-repeat-end。因此，我没有重复 ul's，而是被迫重复 td，当有超过 1 个家时，这会弄乱 ui。

我制作了另一个 plnkr，这样你就可以看到它有 2 个家的样子。

http://plnkr.co/edit/Q37peH968SJc9OvD8lif?p=preview

是否有其他方法可以解决此 ng-repeat-start / end 限制？

Answer 1

根据我的评论，问题是您试图在二维网格 (table) 中显示 3 维数据 (person-home-furniture)。

在不展平数据的情况下，解决方案是使用多个 table 实体作为三维：

table body = 人
行=家
单元格中的列表 = 家具

有关示例，请参见下面的代码段。请注意，我们给第一列（此人的姓名）一个 rowspan 等于房屋的数量，并且我们只显示此人的第一个房屋。

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

app.controller('PersonHomeFurnitureCtrl', function($scope) {

  $scope.persons = [{
    "name": "Mandy",
    "height": 5,
    "homes": [{
      "location": "California",
      "size": "medium",
      "furniture": [{
        "name": "couch",
        "color": "white"
      }, {
        "name": "table",
        "color": "black"
      }]
    }, {
      "location": "Arizona",
      "size": "large",
      "furniture": [{
        "name": "couch",
        "color": "blue"
      }, {
        "name": "table",
        "color": "light brown"
      }]
    }]
  }]

});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>

<div ng-app="app" ng-controller="PersonHomeFurnitureCtrl">

  <table class="table">
    <thead>
      <th>Name</th>
      <th>House</th>
      <th>Furniture</th>
    </thead>
    <!-- one table body per person -->
    <tbody ng-repeat="person in persons">
      <!-- one row per home -->
      <tr ng-repeat="home in person.homes">
        <td rowspan="{{person.homes.length}}" ng-if="$index === 0">{{person.name}}</td>
        <td>
          <ul>
            <li>{{home.location}}</li>
          </ul>
        </td>
        <td>
          <!-- one list per furniture -->
          <ul ng-repeat="furniture in home.furniture">
            <li>{{furniture.name}}</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>

或者，如果您想避免使用多个 table 主体，您可以按一维展平数据。比如创建一个homes数组，在每个home中引用原来的person。然后，使用与上面相同的逻辑，但使用 home.person 来引用人而不是转发器。

table 中的 ng-repeat-start 嵌套对象

ng-repeat-start nested object within a table

html

angularjs

ng-repeat