ng-repeat-start表

Question

我尝试使用表格以下列格式显示以下信息。

这是一个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个家庭和多个家具，但当有超过1个家庭（以及多个家具）时，我遇到了ui / table问题。

我已经尝试将ng-repeat-start移动到ul元素，但有角度抱怨我在执行此操作时无法找到ng-repeat-end。因此，我不得不重复，而是强行重复td，当有超过1个家的时候，这会使ui混乱。

我做了另一个plnkr，所以你可以看到2个房子的样子。

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

还有另一种解决这种ng-repeat-start / end限制的方法吗？

Answer 1

根据我的评论，问题在于您尝试在二维网格（表格）中显示三维数据（人 - 家具）。

如果不展平数据，解决方案是使用多个表体作为第三维：

1. table body = person
2. row = home
3. 在cell = furniture
中列出

请参阅下面的代码段以获取示例。请注意，我们会给第一列（人名）rowspan等于家庭数量，我们只会首先为此人展示家。

＆＃13;
＆＃13;
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"
      }]
    }]
  }]

});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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