在 table 中使用 Ng-repeat，替代多个 tbody？

Question

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

<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，所以我不确定我还有什么其他选择。附上渲染图 table。这正是我想要的，但没有多个 tbody。

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

在 table 中使用 Ng-repeat，替代多个 tbody？

Using Ng-repeat in table, alternatives to multiple tbody?

javascript

angularjs

angularjs-ng-repeat