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">

插入一封信后失去焦点

1 个答案: