Question

为什么这个简单的表结构不适用于angularjs？没有任何行填充数据。如果我用 tr 替换 span ，它可以正常工作，但我的第三列百分比并不适合。

<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个属性的ARRAY，每个属性为grade，gp，percent

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

2 个答案: