ng-show ng-hide using controller

Question

Я пытаюсь отредактировать поле и преобразовать ярлык в текстовое поле одним нажатием кнопки и изменить его на метку на событии нажатия клавиши (ng-keypress).

Я изменяю переменную ng-show через контроллер, но он не работает.

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; 
    } 
    } 
} 

Мой обновленный JS-Fiddle ссылка: http://jsfiddle.net/8Yz7S/281/

Answer 1

Использование нг размытости вместо нг-нажатие клавиши,

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

DEMO

EDIT:

Используйте следующую директиву для обработки ввода ключа события,

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

Вы хотите, чтобы запутать как можно больше логики, насколько это возможно с точки зрения. Так как он предложил использовать

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

Затем сделать все логика внутри функции changemode():

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

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

Answer 3

Вы можете попробовать решения ниже.

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

Добавлен интервал для обновления вида

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

Причина его не работает для вас является то, что вы не предотвратили поведение по умолчанию Enter ключа. Таким образом, после выполнения функции changemode и editmode установлено значение false, нажатие кнопки «Изменить» также выполняется, установка editmode обратно на true.

Все, что вам нужно сделать, это вызов event.preventDefault();, как показано ниже:

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

Чтобы проверить это поведение, вы можете проверить эту скрипку: http://jsfiddle.net/vnathalye/8Yz7S/301/

Попробуйте это после того, как комментируя линию event.preventDefault(); и проверить консоль.