Question

我想制作一个项目列表，双击一个项目使其可编辑。目前，在编辑项目时，单击外部（即blur）会提交新值。但是，我还希望键盘上的enter能够提交更改。

现在，ng-keyup, ng-keydown, ng-keypress是AngularJS的一部分。我正在考虑使用它们。这是我目前的代码。它可以捕获我们正在编辑的enter和item的事件，但我不知道如何完成剩下的工作。

有人可以帮忙吗？

    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;
      $scope.up = function ($event, item) {
        if ($event.keyCode === 13) {
          console.log(item.name);
          // what to do?
        }
      }
    }])

    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>
<body ng-app="app" ng-controller="Ctrl">
  <table>
    <tr ng-repeat="item in items">
      <td>
        <input type="text" value="{{item.name}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" ng-keyup="up($event, item)"/>
      </td>
    </tr>
  </table>
</body>

PS：JSBin

Answer 1

将eEditable设置回-1

$scope.up = function ($event, item) {
    if ($event.keyCode === 13) {
      console.log(item.name);
      $scope.eEditable = -1;
    }
  }

Answer 2

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;
  $scope.up = function ($event, item) {
    if ($event.keyCode === 13) {
        $event.currentTarget.blur();
    }
  }
}])

使用enter提交输入更改

2 个答案: