如何在具有正确索引值

Question

我试图在agularjs中使用ng-repeat继续。它工作正常，但问题是如果一个条件满足，索引值也改变了，也就是索引的顺序也改变了。 我的代码如下。

<tbody>
  <tr ng-repeat="appointment in rows" ng-if="appointment.isBrightFuture==1">
    <td ng-class="{{appointment.isBrightFuture==1?'tdImage':''}}">{{$index+1}}
      <img ng-if="appointment.isBrightFuture==1" ng-src="img/brightfuture_logomedium.png">
    </td>
    <td>{{appointment.date}}</td>
    <td>{{appointment.time}}</td>
    <td>{{appointment.specialtyId=="5"?'Pediatrics':appointment.specialty}}</td>
    <td>{{appointment.physicianName}}
      <br/>{{appointment.orgName}}</td>
    <td>{{appointment.reason!="null"?appointment.reason:''}}</td>
    <td>
      <img ng-if="hasAppointmentPrivilege()" src="img/edit.png" ng-click="editPastAppointment($index)" />
    </td>
    <td>
      <img ng-if="hasAppointmentPrivilege()" src="img/cancel.png" ng-click="deletePastAppointment($index)" />
    </td>
  </tr>
</tbody>

Answer 1

您应该在显示数组之前过滤数组，而不是使用ng-if来避免显示其中一行。与此相反的问题是你所拥有的问题的反转：$ index将是过滤数组中当前元素的索引，而不是原始数组中的索引。所以你应该重构函数来接受元素本身而不是它的索引：

<tr ng-repeat="appointment in rows | filter:hasBrightFuture">
    <td class="tdImage">{{$index+1}}
      <img src="img/brightfuture_logomedium.png" />
    </td>
    <td>{{appointment.date}}</td>
    <td>{{appointment.time}}</td>
    <td>{{appointment.specialtyId=="5"?'Pediatrics':appointment.specialty}}</td>
    <td>{{appointment.physicianName}}
      <br/>{{appointment.orgName}}</td>
    <td>{{appointment.reason!="null"?appointment.reason:''}}</td>
    <td>
      <img ng-if="hasAppointmentPrivilege()" src="img/edit.png" ng-click="editPastAppointment(appointment)" />
    </td>
    <td>
      <img ng-if="hasAppointmentPrivilege()" src="img/cancel.png" ng-click="deletePastAppointment(appointment)" />
    </td>
</tr>

在你的控制器中：

$scope.hasBrightFuture = function(appointment) {
    return appointment.isBrightFuture === 1;
}