按钮在 ngRepeat 中无法正常工作

Question

问题是当我点击在 ngRepeat 中生成的按钮时，它的行为是不可预测的。它可以在第一次点击或第五次点击时做出响应。最稳定的行为是双击反应。

中完全重现了我的项目的问题部分

问题已在 Chrome、Firefox 和 Edge 中检查，结果相同。

我猜这个问题是由 Angular 生成范围的方式引起的...但我对 Angular 还很陌生，整整一周都没有成功解决这个问题。那么，请问有人可以帮忙吗？ :)

<table class="table attendance" ng-repeat="task in groupAttendance| groupBy: 'taskId'">
    <caption class="header-primary">
      <a>Task {{($index + 1)}} | {{task[0].title}}</a>
    </caption>
    <thead>
      <tr class="header-secondary">
        <th ng-repeat="date in task| unique: 'classDate'">
          {{getDayOfWeek(date.classDate)}}
          <br> {{formatClassDate(date.classDate)}}
        </th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="student in task | groupBy: 'studentId' | toArray: true | orderBy: orderByName">
        <td ng-repeat="attendance in student track by attendance.attendanceId">
          <md-button class="attendance-button" ng-click="showEditAttendanceDialog($event, attendance)" ng-disabled="isDisabled">
            <md-icon ng-class="{'green-700': present, 'red-700': absent, 'yellow-700': absentWithReason}">
              {{attendanceStatus(this)}}
            </md-icon>
          </md-button>
        </td>
      </tr>
    </tbody>
  </table>

Answer 1

问题出在这一行：

 <tr ng-repeat="student in task | groupBy: 'studentId' | toArray: true | orderBy: orderByName">

toArray: true/false 导致问题

解决方案是添加track by $index like:

 <tr ng-repeat="student in task | 
                      groupBy: 'studentId' | 
                      toArray: true |
                      orderBy: orderByName track by $index" >

工作Plunker

问候 @Mike 回答 ... I believe the code is too slow. 索引跟踪应该改进应用程序。性能，因为您添加索引而不是 angular（太贵了）

Answer 2

随着 Maxim 的回答，我认为代码太慢了。当您绑定到一个函数而不是一个作用域变量时，这个函数的执行频率可能比您想象的要高。有时最好预先格式化数据，在对象上创建一个新的属性，然后绑定到它。

我向 attendanceStatus 添加了日志记录语句，当我单击一个按钮时，该函数似乎被调用了一千次。

按钮在 ngRepeat 中无法正常工作

Buttons work not properly in ngRepeat

angularjs

angular-material