0

I have an Angular page with a grid-like view. Inside each row is an input element:

<div class="grid">
  <div class="group" ng-repeat="(key, value) in groups | groupBy: groupingFunction>
    <div class="row" ng-repeat="row in value">
      <input type="text" ng-model="row.name">
    </div>
  </div>
</div>

I want to tab through all the input elements in order. This more or less works, except that Angular will redraw the elements when I tab out of the first input element, resetting the focus to somewhere outside the grid. When I quickly press tab several times, I can usually reach the 5th or so element before that happens, so the tab order itself is working. My question is, how do I prevent Angular from (seemingly unnecessarily) redrawing part of my grid?

I tried delaying the view updates for the input, as suggested in this question, but the redraws still happen. So, it looks like something else is causing them. Any suggestions on how to find out what, would be appreciated.

Community
  • 1
  • 1
Jorn
  • 20,612
  • 18
  • 79
  • 126
  • it seem like ngChange is firing when you tab out of the input field... have you checked this: http://stackoverflow.com/questions/25252949/angularjs-ng-change-doesnt-get-fired-on-ng-model-onblur-directive-in-ie9-and-10 and http://stackoverflow.com/questions/11868393/angularjs-inputtext-ngchange-fires-while-the-value-is-changing – Milan Dec 04 '15 at 20:05
  • So, how do I find out why ngChange is firing, and on which model? The actual case contains more elements than the example ;) The questions you linked can help me disable the event once I find its source. – Jorn Dec 07 '15 at 14:31
  • I tried only updating the model value on blur, but it doesn't help. I tried not updating the value at all, but redraws are still happening (and now obviously my changes aren't propagated). So it seems model updates aren't causing the redraw. Something else is. – Jorn Dec 07 '15 at 15:15

0 Answers0