javascript - 如何在angular js中分组和rowspan

Question

我在下面给出了一个 Json

[{
    groupName: "Group 1",
    [{
        name: "Item 1"
    }, {
        name: "Item 2"
    }]
},
{
    groupName: "Group 2",
    [{
        name: "Item 3"
    }, {
        name: "Item 4"
    }]
}]

我需要一张如图所示的表格 here ，如何在 Angular js 中实现这一点。

Answer 1

我保留了您的 JSON 结构，但只是将名称 vals 命名为子数组:

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.data = [{
    groupName: "Group 1",
    vals: [{
      name: "Item 1"
    }, {
      name: "Item 2"
    }]
  }, {
    groupName: "Group 2",
    vals: [{
      name: "Item 3"
    }, {
      name: "Item 4"
    }]
  }];
});

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="app" ng-controller="ctrl">
  <thead>
    <td><strong>Group</strong></td>
    <td><strong>Items</strong></td>
  </thead>
  <tbody ng-repeat="d in data">
    <tr>
      <td rowspan="{{d.vals.length}}">{{d.groupName}}</td>
      <td>{{d.vals[0].name}}</td>
    </tr>
    <tr ng-repeat="v in d.vals" ng-if="$index > 0">
      <td>{{v.name}}</td>
    </tr>
  </tbody>
</table>

Demo on JSFiddle