ng-show ng-ausblenden mit Controller

Question

Ich versuche, ein Feld zu bearbeiten und Etikett in Textfeld auf einen Klick auf eine Schaltfläche und ändern Sie es zurück in Etikett bei Tastendruck-Ereignis (ng-keypress).

Ich ändere die Variable ng-show durch den Controller, aber es funktioniert nicht.

HTML:

<div ng-app> 
    <div ng-controller="showCrtl"> 
     <form> 
     <label ng-hide="editMode" >{{field}}</label> 
      <input ng-show="editMode" ng-keypress="changemode($event) " ng-model="field" > 
      <span class="pull-right" > 
      <button ng-click="editMode=true" class="btn-lg btn-warning" >edit </button>          </span>      
     </form> 

    </div> 
</div> 

JS:

function showCrtl($scope){ 
    $scope.field="Chanel"; 
    $scope.changemode=function(event){ 
    if(event.charCode==13){ 
      $scope.editMode = false; 
    } 
    } 
} 

Meine aktualisiert JS-Fiddle Link: http://jsfiddle.net/8Yz7S/281/

Answer 1

Verwendung ng-Unschärfe statt ng-keypress,

<input ng-show="editMode" ng-blur="changemode() " > 

DEMO

EDIT:

die folgende Anweisung an das Schlüsselereignis behandeln geben,

app.directive('ngEnter', function() { 
    return function(scope, element, attrs) { 
    element.bind("keydown keypress", function(event) { 
     if (event.which === 13) { 
     scope.$apply(function() { 
      scope.$eval(attrs.ngEnter); 
     }); 

     event.preventDefault(); 
     } 
    }); 
    }; 
}); 

DEMO

Answer 2

Sie wollen aus der Sicht so viel Logik wie möglich verschleiern. So wie er vorgeschlagen, verwenden

<input ng-show="editMode" ng-keypress="changemode($event)"> 

Dann tun Sie alle Ihre Logik innerhalb des Change() Funktion:

$scope.changemode = function(evt) { 
    $timeout(function() {$scope.editMode = false;},100); 
} 

http://jsfiddle.net/8Yz7S/293/

Answer 3

Können Sie versuchen, die unten Lösung.

<input ng-show="editMode" ng-keypress="changemode($event) " > 

hinzugefügt Intervall die Ansicht zu aktualisieren

function showCrtl($scope, $timeout){ 

    $scope.changemode=function(event){ 
    if(event.charCode==13){ 

    $timeout(function() { 
    $scope.editMode = false; 
    }, 500); 
    } 
    } 
    } 

http://jsfiddle.net/gsjsfiddle/hcu5mkhm/3/

Answer 4

Der Grund, es ist nicht für Sie arbeiten, ist, dass Sie das Standardverhalten von Enter Schlüssel nicht verhindern. Nach changemode wird die Funktion ausgeführt und editmode wird auf false gesetzt, klicken Sie auf Ereignis der Schaltfläche Bearbeiten wird auch ausgeführt, Einstellung editmode zurück zu true.

Alles, was Sie tun müssen, ist Aufruf event.preventDefault(); wie unten dargestellt:

function showCrtl($scope){ 
    $scope.field="Chanel"; 
    $scope.changemode=function(event){ 
    if(event.charCode==13){ 
     $scope.editMode = false; 
     event.preventDefault(); // <<<<<<< 
    } 
    } 
} 

Um dieses Verhalten zu überprüfen, können Sie diese Geige überprüfen: http://jsfiddle.net/vnathalye/8Yz7S/301/

Probieren Sie es aus, nachdem die Linie event.preventDefault(); Kommentierung und die Konsole überprüfen.