Ng-repeat 在 html 表中没有按预期工作？

Question

为什么这个简单的表格结构在 angularjs 中不起作用？没有任何行被数据填充。如果我将 span 替换为 tr，它可以正常工作，但我的第三列 Percent 不适合。

<table class="table table-hover">
 <tbody>
    <tr>
         <th>Grade</th>
         <th>Point</th>
         <th>Percent</th>
   </tr>
   <tr>
          <span ng-repeat="gdata in gradepoints">
             <td ng-repeat="(grade, gp) in gdata"> {{grade | uppercase}} </td>
             <td ng-repeat="(grade, gp) in gdata"> {{gp}} </td>
           </span>
           <span ng-repeat="pdata in percents">
              <td ng-repeat="(grade, perc) in pdata"> {{perc}} </td>
           </span>
    </tr>
   </tbody>
 </table>

Answer 1

试试这个：

<tr ng-repeat="gdata in gradepoints">
    <td>{{gdata.grade | uppercase}}</td>
    <td>{{gdata.gp}}</td>
    <td>{{pdata[$index].perc</td>
</tr>

您希望 gdata 数组中的每个元素都有一行，因此 ng-repeat 需要位于 <tr> 元素上。如果两个数组不同步，您可以在控制器中创建一个函数来返回您需要的 pdata 元素：

$scope.findPdata(gdata, index) {
    // ... do your magic here to find the pdata element you want
    return result;
}

<td>{{findPdata(gdata, $index)}}</td>

Answer 2

从下面猜测：

        <tr>
                  <th>Grade</th>
                 <th>Point</th>
                  <th>Percent</th>
       </tr>       

我猜你的表有 3 列，所以你的每一行有 3 列？

在这种情况下使用以下

<tr ng-repeat="gdata in gradepoints">

  <td>{{gdata.grade | uppercase}}</td>
 <td>{{gdata.gp}}</td>
   <td>{{gdata.percent}}</td>


</tr>       

为使上述工作，您的成绩点必须是一个包含对象的数组，每个对象具有 3 个属性，即等级、gp、百分比