在表中使用 Ng-repeat，替代多个 tbody？答案

【问题标题】：Using Ng-repeat in table, alternatives to multiple tbody?在表中使用 Ng-repeat，替代多个 tbody？
【发布时间】：2020-08-19 03:09:09
【问题描述】：

我有多个对象，我试图为每个对象生成多行。请看代码sn-p：

<table style="width:100%">
  <thead>
    <tr>
      <th colspan="3" style="background:whitesmoke; font-size:17px; font-weight: 500">
        Release Criteria <span ng-if="$ctrl.casesModalState.IsEditingCase"> <button ng-click="$ctrl.openCriteriaModal()" type="button" style="float:right; border:none; color: mediumblue; background-color:transparent; margin-right:15px; font-weight:500; font-size: 14px !important"><i class="fa fa-plus" style="margin-right:5px"></i>Add Criteria</button></span>
      </th>
    </tr>
  </thead>

  <tbody ng-repeat="caseObj in $ctrl.businessCaseService.selectedCase.listOfActiveBusinessCriteria track by $index">
    <tr>
      <td class="criteriaHeader">{{caseObj.criteriaHeader}}</td>
      <td class="valueHeader">{{caseObj.criteriaValueHeader}}</td>
    </tr>
    <tr ng-repeat="criteriaObj in caseObj.criteriaOptions track by $index">
      <td class="valueLabel">{{criteriaObj.criteriaLabel}}</td>
      <td class="valueClass" ng-attr-id="{{'listIndexValue-' + $index}}" contenteditable="false">{{criteriaObj.value}}</td>
    </tr>
  </tbody>
</table>

这实际上做了我想要的，但是拥有多个 tbody 并不好。我不能在这里使用 div 来放入我的 ng-repeat，所以我不确定我还有什么其他选择。附上渲染表的图像。这正是我想要的，但没有多个 tbody。

【问题讨论】：

查看 JSON 结构可能会有所帮助，但我很难理解为什么您无法使用
元素实现这种布局。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

您可以使用ng-repeat-start 和ng-repeat-end 使两个tr 被ng-repeat 视为一个：

function myCtrl($scope) {
  $scope.objects = [{
      type: "MoU",
      children: [{
        label: "yes",
        value: 0
      }, {
        label: "no",
        value: 0
      }],
    },
    {
      type: "Incentive",
      children: [{
        label: "yes",
        value: 1
      }, {
        label: "no",
        value: 1
      }],
    },
    {
      type: "Impact",
      children: [{
        label: "yes",
        value: 1
      }, {
        label: "no",
        value: 1
      }],
    }
  ];
}

const app = angular.module("app", [])
  .controller("myCtrl", myCtrl);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<table style="width:100%" ng-app="app" ng-controller="myCtrl as $ctrl">
  <thead>
    <tr>
      <th colspan="3">
        Release Criteria
      </th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat-start="caseObj in objects">
      <td class="criteriaHeader">{{caseObj.type}}</td>
      <td class="valueHeader">{{caseObj.children.length}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="child in caseObj.children track by $index">
      <td>{{child.label}}</td>
      <td ng-attr-id="{{'listIndexValue-' + $index}}">{{child.value}}</td>
    </tr>
  </tbody>
</table>

【讨论】：