The problem is when I click button generated in ngRepeat, its behavior is unpredictable. It can respond on first click or on fifth. The most stable behavior is reaction on double click.
I have completely reproduced the problem piece of my project in this Plunker.
The issue checked in Chrome, Firefox and Edge with identical result.
My guess is that problem caused by the way Angular generates scopes... but I am very new to Angular and wasn't successful in fighting this problem for a whole week. So please, could anybody help? :)
<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>
The problem is in this row:
<tr ng-repeat="student in task | groupBy: 'studentId' | toArray: true | orderBy: orderByName">
toArray: true/false causes to problem
The solution is to add track by $index like:
<tr ng-repeat="student in task |
groupBy: 'studentId' |
toArray: true |
orderBy: orderByName track by $index" >
Working Plunker
Regards to @Mike answer ... I believe the code is too slow. The index tracking should improve app. performance since you add indexing and not angular (that too expensive)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With