在表格中使用Ng-repeat，可以替代多个肢体吗？

问题描述

我有多个对象，并且我试图为每个对象生成多行。请查看代码段：

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

这实际上可以满足我的要求，但是拥有多个肢体并不是很好。我不能在这里使用div来放置ng-repeat，所以我不确定我还有什么其他选择。附加了渲染表的图像。这正是我想要的，但没有多个躯干。

解决方法

您可以将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",value: 1
      },value: 1
      }],{
      type: "Impact",}
  ];
}

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>