插入字母后失去焦点

Question

我写了一个脚本，它以两种方式表示 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中的值将改变textarea中的字符串（因为$watch('data')；修改textarea中的字符串将改变GUI（因为$watch('dataString')）。

但是，问题是当我们在GUI中更改值时，我们在插入一个字母后失去了焦点。

有人知道怎么修改吗？

Answer 1

所以问题是您正在遍历数组 (ng-repeat) 并更改数组的项目。这些项目从 DOM 中删除并插入新项目，因为它们是字符串，因此按值进行比较。这会让你失去焦点。虽然修复起来非常简单。只需按索引跟踪，因为对象的顺序相同。

变化：

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

收件人：

<div ng-repeat="item in data track by $index">

插入字母后失去焦点

Lose the focus after inserting a letter

focus

lost-focus

angularjs

angularjs-watch