Используйте ввод, чтобы отправить изменение ввода

Я хочу сделать список элементов, двойной щелчок по одному элементу делает его редактируемым. В настоящее время при редактировании элемента, нажимая снаружи (т.е. 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

Источник

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();
    }
  }
}])
Источник

Просто установите eEditable обратно на -1

$scope.up = function ($event, item) {
    if ($event.keyCode === 13) {
      console.log(item.name);
      $scope.eEditable = -1;
    }
  }
Источник
Другие вопросы по тегам