Потерять фокус после вставки письма

Я написал скрипт, который представляет данные JSON двумя способами: JSBin

<!DOCTYPE html>
<html>
  <head>
    <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="Ctrl">
      GUI:
      <div ng-repeat="item in data">
        <input ng-model="item.val">
      </div>
      <br><br><br>
      Textarea:<br>
      <textarea rows=10 cols=20 ng-model="dataString"></textarea>
    </div>

  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', '$filter', function($scope, $filter) {
      $scope.data = [{val: "1"}, {val: "2"}];

      $scope.$watch('data', function(data_new) {
        $scope.dataString = $filter('json')(data_new);
      }, true);

      $scope.$watch('dataString', function(dataString_new) {
        $scope.data = JSON.parse(dataString_new);
      }, true);

    }]);
  </script>
  </body>
</html>

Таким образом, изменение значения в GUI изменит строку в текстовой области (из-за $watch('data'); и изменение строки в текстовой области изменит GUI (из-за $watch('dataString')).

Однако проблема в том, что при изменении значения в графическом интерфейсе мы теряем фокус после вставки буквы.

Кто-нибудь знает, как это исправить?

Источник

1 ответ

Решение

Так что проблема в том, что вы перебираете массив (ng-repeat) и изменение элементов массива. Элементы удаляются из DOM, а новые вставляются, потому что они являются строками и, следовательно, сравниваются по значению. Это заставляет вас потерять фокус. Это довольно просто исправить, хотя. Просто отслеживайте по индексу, так как объекты расположены в одинаковом порядке.

Изменить:

<div ng-repeat="item in data">

Для того, чтобы:

<div ng-repeat="item in data track by $index">
Источник
Другие вопросы по тегам