javascript - 只有双击才能使项目可编辑

Question

我想制作一个项目列表，双击其中一个项目即可对其进行编辑。我关注了this answer并编写了以下代码( JSBin )。

一开始，所有项目都是只读的；双击某个项目确实可以对其进行编辑。但是，编辑后，我意识到它不再是只读的。我认为正确的逻辑是一旦我们修改了一项，它就会再次变为只读，只有双击才能更改它。

有谁知道如何修改代码来实现这一点？

  var app = angular.module('app', []);
  app.controller('Ctrl', ['$scope', function($scope) {
  $scope.items = [{
  name: "item #1"
  }, {
  name: "item #2"
  }, {
  name: "item #3"
  }];
  $scope.eEditable = -1;
  }])

  input {
  font-size: 20px;
  border: none;
  background-color: transparent;
  }

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <div ng-app="app" ng-controller="Ctrl">
  <table>
  <tr ng-repeat="item in items">
  <td>
  <input type="text" value="{{item.name}}  {{$index}}" ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" />
  </td>
  </tr>
  </table>
  {{count}}
  </div>

Answer 1

将ng-blur='eEditable = -1'添加到输入:

<input type="text" value="{{item.name}} {{$index}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" />

JSBin