2017-04-13 1 views
1

Nous utilisons des zones de texte sur des modèles de cellules à la place en utilisant un editableCellTemplate.Ui-grid déclenche ng-flou sur la mauvaise zone de texte lorsque défilée hors de vue

http://plnkr.co/edit/M8Do1p?p=preview

<input class="grid_textbox text-center" 
    ng-blur="grid.appScope.quantityChanged(row.entity)" 
    ng-model="MODEL_COL_FIELD" style="width:80%"/> 

Nous identifions les changements en attrapant ng-flou sur les zones de texte. Cependant, nous avons remarqué que lorsque la zone de texte est hors de vue lorsque l'utilisateur défile, il ne déclenche pas le ng-flou sur la zone de texte correcte.

Reproduire dans plnkr

  1. Cliquez sur la première zone de texte.
  2. Cliquez sur la deuxième zone de texte pour afficher les informations sur l'événement Flou. C'est le comportement attendu
  3. Pour reproduire l'erreur, cliquez sur Effacer et cliquez à nouveau sur la première zone de texte.
  4. Faites défiler jusqu'à mi-bas et cliquez sur une zone de texte. Il ne produira pas le même message que ci-dessus.

Y at-il un moyen de résoudre ce problème ou une solution de contournement pour obtenir la ligne qui a été modifiée?

Mise à jour: J'ai essayé la solution de Guranjan et cela a fonctionné, mais un autre problème est survenu. Je ne suis pas sûr si cela devrait être une autre question mais c'est toujours lié au défilement et au flou.

Pour répliquer

  1. Cliquez sur 1ère zone de texte et entrez un numéro
  2. Faire défiler jusqu'à ce qu'il soit hors de la vue.
  3. Cliquez sur une autre zone de texte et éditer.
  4. Cette fois, faites défiler. Vous pouvez voir le curseur se concentrer sur d'autres zones de texte et ne pas déclencher de flou.
  5. Modifier un. Puis faites défiler à nouveau (molette de la souris ou en faisant glisser la barre de défilement). Editez puis faites défiler.
  6. Cliquez sur une zone de texte pour déclencher le flou. Il n'affichera pas toutes les modifications.

Ceci est le plunker de Guranjan pour l'essayer. http://plnkr.co/edit/RWM2y7NLC7821c9vQDO6?p=preview

Répondre

2

Ceci est dû au fait que ui-grid réutilise les éléments. Une façon de résoudre votre problème est de stocker la valeur de la ligne actuelle sur focus et de l'utiliser sur blur. Par exemple, créez variable vous champ de l'application:

$scope.currentValue = {}; 

et vous pouvez mettre à jour ce sur point d'entrée:

ng-focus="grid.appScope.currentValue = row.entity" 

et vous pouvez ensuite utiliser $scope.currentValue pour faire tout ce que vous devez faire.

Updated Plnkr

+0

C'est bien plus simple que ce que j'avais à l'esprit! Je vous remercie! :) – Mark

+0

Salut Guranjan, j'ai rencontré un autre problème.Vous êtes la solution initialement travaillé mais j'ai eu un autre problème avec le défilement. – Mark

+0

@Mark quel est le problème? –