Question

我想制作一个项目列表，双击一个项目使其可编辑。我跟着this answer编写了以下代码（JSBin）。

一开始，所有项目都是只读的;双击一个项目确实可以编辑它。然而，在编辑它之后，我意识到它不再是只读的。我认为正确的逻辑是once we have modified one item, it becomes read-only once again, only double-clicking could change it。

有谁知道如何修改代码来实现这个目标？

  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：

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

JSBin

只需双击即可使项目可编辑

1 个答案: