My task involves creating a table where users can edit certain fields in each row, which will impact other fields within the same row.
Due to this requirement, I cannot use bind-once for all the rendered data.
To address this issue, I attempted using the code snippet below:
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr class="info">
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in alist">
<td>{{::a.id}}</td>
<td>{{::a.cod}}</td>
<td>
<input
ng-model="a.sel"
type="checkbox"
class="input-sm"></input>
</td>
<td ng-if="a.sel">
{{::a.desc}}
</td>
<td ng-if="!a.sel">
"Other Content"
</td>
</tr>
</tbody>
After testing, I observed that when a user checks or unchecks the a.sel checkbox, Angular will watch for changes in all angular {{vars}} on the page (excluding {{::vars}}).
If my understanding is correct (and hence explaining the slow performance with hundreds of rows loaded), how can I instruct Angular to only monitor changes within the specific row or ng-repeat iteration?
I am uncertain about the best approach to improve performance in this scenario. Any advice would be greatly appreciated.