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

Ng-repeat is not working as expected in html table?

本文关键字：工作 html Ng-repeat      更新时间：2023-09-26

为什么这个简单的表结构不能在angularjs中工作?数据不会填充任何行。如果我用tr替换span，它可以正常工作，但我的第三列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>

试试这个:

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

从下面猜测:

        <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个属性的对象，即grade,gp,percent

相关文章：