Verwenden Sie die Eingabetaste, um eine Eingabeänderung zu senden.

Ich möchte eine Liste von Elementen erstellen, indem Sie auf einen Eintrag doppelklicken, um ihn editierbar zu machen. Momentan wird beim Bearbeiten eines Elements ein Klick nach außen (z. B. blur) den neuen Wert übergeben. Aber ich möchte auch enter auf der Tastatur in der Lage sein, die Änderung zu übermitteln.Verwenden Sie die Eingabetaste, um eine Eingabeänderung zu senden.

Jetzt sind ng-keyup, ng-keydown, ng-keypress Teil von AngularJS. Ich denke daran, sie zu benutzen. Hier ist mein aktueller Code. Es kann das Ereignis enter und das item, das wir gerade bearbeiten, abfangen, aber ich weiß nicht, wie ich den Rest erledigen soll.

Konnte jemand helfen?

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

Quelle

2017-03-21 SoftTimur

Warum nicht einfach anrufen 'item.blur()'? – bluehipy

@bluehipy, weil 'item' keine solche Methode hat. '$ event.target.blur()'. – dfsq

@dfsq tatsächlich, '$ event.target.blur()' funktioniert ... Möchten Sie eine Antwort posten? – SoftTimur

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

Quelle

2017-03-21 09:46:14 bluehipy

es funktioniert ... danke ... – SoftTimur

Wie werde ich Gemeinschaft Wiki Thingy loswerden? :)) – bluehipy

Ich weiß nicht ... fragen @dfsq :-) – SoftTimur

gesetzt gerade eEditable zurück auf -1

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

Quelle

2017-03-21 09:37:09 Chinito

Ich habe gerade einen JSBin zum Testen hinzugefügt, ich glaube nicht, dass deine Antwort funktioniert ... – SoftTimur

mach es einfach wie der ng-blur – Chinito

Es wird natürlich nicht funktionieren. Kind Bereich Shadowing :) Sie könnten mit $ Eltern Bereich der Punktreferenz verwirren (weiß nicht, wie es besser zu sagen). Einfacher, Blur-Ereignis bei event.target auszulösen. Oder verwenden Sie ControllerAs. – dfsq

Verwenden Sie die Eingabetaste, um eine Eingabeänderung zu senden.

Antwort

Verwandte Themen