Use enter to submit an input change

Question

I want to make a list of items, double-clicking on one item makes it editable. Currently, while editing an item, clicking outside (ie, blur) submits the new value. But, I also want enter on the keyboard to be able to submit the change.

Now, ng-keyup, ng-keydown, ng-keypress are part of AngularJS. I am thinking of using them. Here is my current code. It can catch the event of enter and the item that we are editing, but I don't know how to do the rest.

Could anyone help?

    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

@bluehipy because `item` doesn't have such method. `$event.target.blur()`. — dfsq, Mar 21 '17 at 09:40
@dfsq indeed, `$event.target.blur()` works... do you want to post an answer? — SoftTimur, Mar 21 '17 at 09:44

score 0 · Answer 1 · answered Mar 21 '17 at 09:37

0

just set eEditable back to -1

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

answered Mar 21 '17 at 09:37

Chinito

1,085
1
9
11

just do it like the ng-blur – Chinito Mar 21 '17 at 09:43
It will not work of course. child scope shadowing :) You could mess with $parent scope of dot referencing (don't know how to put it better). Simpler to trigger blur event on event.target. Or use controllerAs. – dfsq Mar 21 '17 at 09:47
i didn't say you have to trigger the ng-blur. my point is that you just have to copy like what you did with the ng-blur. – Chinito Mar 21 '17 at 09:59

bluehipy · Accepted Answer · 2017-03-21T10:01:19.127

0

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();
    }
  }
}])

edited Mar 21 '17 at 10:01

answered Mar 21 '17 at 09:46

bluehipy

2,254
1
13
19

I don't know... ask @dfsq :-) – SoftTimur Mar 21 '17 at 10:15

Use enter to submit an input change

2 Answers2