Как сохранить поля формы, нажав enter в Angularjs x-editable?

Question

Я пытаюсь сохранить поле формы, используя Angularjs x-editable. В данном примере на своем веб-сайте они используют кнопку сохранения для сохранения полей. Тем не менее, я пытаюсь выполнить функцию сохранения без нажатия кнопки сохранения. Вместо этого я хочу иметь возможность сохранять каждый раз, когда я нажимаю клавишу ввода в любом из редактируемых полей (имя, статус, группа). Я знаю, что это можно достичь в традиционной форме, нажав кнопку ввода, но это не работает в этом случае.

Вот ссылка http://vitalets.github.io/angular-xeditable/#editable-form

и JSFiddle. http://jsfiddle.net/NfPcH/93/.

Любая помощь приветствуется, спасибо.

HTML

<h4>Angular-xeditable Editable row (Bootstrap 3)</h4> 
<div ng-app="app" ng-controller="Ctrl"> 
    <table class="table table-bordered table-hover table-condensed"> 
    <tr style="font-weight: bold"> 
     <td style="width:35%">Name</td> 
     <td style="width:20%">Status</td> 
     <td style="width:20%">Group</td> 
     <td style="width:25%">Edit</td> 
    </tr> 
    <tr ng-repeat="user in users"> 
     <td> 
     <!-- editable username (text with validation) --> 
     <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required> 
      {{ user.name || 'empty' }} 
     </span> 
     </td> 
     <td> 
     <!-- editable status (select-local) --> 
     <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> 
      {{ showStatus(user) }} 
     </span> 
     </td> 
     <td> 
     <!-- editable group (select-remote) --> 
     <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups"> 
      {{ showGroup(user) }} 
     </span> 
     </td> 
     <td style="white-space: nowrap"> 
     <!-- form --> 
     <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user"> 
      <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary"> 
      save 
      </button> 
      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"> 
      cancel 
      </button> 
     </form> 
     <div class="buttons" ng-show="!rowform.$visible"> 
      <button class="btn btn-primary" ng-click="rowform.$show()">edit</button> 
      <button class="btn btn-danger" ng-click="removeUser($index)">del</button> 
     </div> 
     </td> 
    </tr> 
    </table> 

    <button class="btn btn-default" ng-click="addUser()">Add row</button> 
</div> 

Answer 1

В моем опыте, единственный способ сделать это, чтобы захватить KeyDown события, передавая $ события и rowform. В обработчике keydown вы можете оценить нажатую клавишу и сохранить форму или просто сохранить текущее значение в вашем постоянном хранилище.

... 
<span editable-text="user.name" e-name="name" 
     e-form="rowform" onbeforesave="checkName($data, user.id)" 
     e-required 
     e-ng-keydown="navigate($event,rowform)"> 
    {{ user.name || 'empty' }} 
</span> 
... 

Затем в контроллере

$scope.navigate = function(event,form) { 
    if (event.keyCode==13) { 
    //...Enter Key Processing 
    } else if (event.keyCode==27) { 
    //...Escape key processing 
    } else if (...other key codes) 
    //...Et cetera 
} 

Вы можете использовать rowform.$submit() для отправки формы.

надеюсь, что это поможет. Удачи