按鈕在ngRepeat中的工作不正確

問題是當我點擊ngRepeat中生成的按鈕時，它的行爲是不可預知的。它可以在第一次點擊或第五次時作出響應。最穩定的行爲是雙擊時的反應。按鈕在ngRepeat中的工作不正確

我完全轉載了我的項目中的問題片this Plunker。

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

來源

2015-09-03 Anastasius

問題是此行中：

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

toArray: true/false原因到問題

的解決方案是增加track by $index像：

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

工作Plunker個

問候@Mike答案... I believe the code is too slow.該指數跟蹤要提高應用程序。性能，因爲你添加索引，而不是角（這太昂貴）

來源

2015-09-03 12:23:20

工程就像一個魅力！非常感謝！你讓我開心！ :) – Anastasius

除了馬克西姆的答案，我相信代碼太慢了。當你綁定到一個函數而不是一個範圍變量時，這個函數可以比你想象的更頻繁地執行。有時最好預先格式化數據，在對象上創建一個新屬性，然後綁定到該屬性。

我將記錄語句添加到了attendanceStatus，當我點擊一個按鈕時，它看起來像是該函數被稱爲一千次。

來源

2015-09-03 12:29:56 Mike

我改變了attendanceStatus函數綁定到一種方式，並解決了調用它的問題數千次。在那個地方沒有必要雙向綁定。儘管這不是問題的原因，但也要感謝您的優化！ – Anastasius

按鈕在ngRepeat中的工作不正確

回答

相關問題