如何在角度js中分组和rowpan

Question

我在下面有一个Json

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

我需要一个如here所示的表格，如何在角度js中实现。

Answer 1

我保留了您的JSON结构，但只是将名称vals提供给子数组：

＆＃13;

＆＃13;

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"
    }]
  }];
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Demo on JSFiddle

Answer 2

这是我的解决方案

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

function MyCtrl($scope) {
    $scope.data = [{
      groupName: "Group 1",
      nestedData: [{
        name: "Item 1"
      }, {
        name: "Item 2"
      }]
    },
    {
      groupName: "Group 2",
      nestedData: [{
        name: "Item 3"
      }, {
        name: "Item 4"
      }]
    }
  ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="table">
    <thead>
      <th>Name</th>
      <th>Nested name</th>
    </thead>
    <tbody ng-repeat="item in data">
          <tr ng-repeat="nestedItem in item.nestedData">
            <td rowspan="{{item.nestedData.length}}" ng-hide="$index == 1">{{item.groupName}}</td>
            <td>{{nestedItem.name}}</td>
          </tr>
    </tbody>
  </table>
</div>

Answer 3

您必须使用ng-repeat指令才能将render信息导入table。

＆＃13;

＆＃13;

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

function myCTRL($scope) {
    $scope.groups = [{
      groupName: "Group 1",
      sub: [{
        name: "Item 1"
      }, {
        name: "Item 2"
      }]
    },
    {
      groupName: "Group 2",
      sub: [{
        name: "Item 3"
      }, {
        name: "Item 4"
      }]
    }
  ];
}

＆＃13;

td,th{
  border:1px solid grey;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCTRL">
   <table>
            <tr>
              <th>Group</th>
              <th>Items</th>
            </tr>
            <tr ng-repeat="group in groups" >
              <td>{{group.groupName}}</td>
              <td >
                 <table>
                    <tr ng-repeat="subgroup in group.sub">
                    <td>{{subgroup.name}}</td>
                   </tr>
                 </table>
              </td>
            </tr>
          </table> 
</div>

＆＃13;

＆＃13;

＆＃13;