J'essaie de modifier un champ et de convertir une étiquette en champ de texte en cliquant sur un bouton et de le changer en étiquette sur l'événement de pression de touche (ng-keypress).

Je change la variable ng-show via le contrôleur mais cela ne fonctionne pas.

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

Mon lien JS-Fiddle mis à jour: http://jsfiddle.net/8Yz7S/281/

0
Rachel 27 janv. 2017 à 04:11

4 réponses

Meilleure réponse

Utilisez ng-blur au lieu de ng-keypress,

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

DEMO

MODIFIER:

Utilisez la directive suivante pour gérer l'événement de clé d'entrée,

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

2
Sajeetharan 27 janv. 2017 à 02:17

Pouvez-vous essayer la solution ci-dessous.

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

Intervalle ajouté pour mettre à jour la vue

function showCrtl($scope, $timeout){

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

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

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

1
GrabNewTech 27 janv. 2017 à 02:49

La raison pour laquelle cela ne fonctionne pas pour vous est que vous n'empêchez pas le comportement par défaut de la clé Enter. Ainsi, une fois que la fonction changemode est exécutée et que editmode est défini sur false, l'événement de clic du bouton Modifier est également exécuté, redéfinissant editmode sur true.

Tout ce que vous avez à faire est d'appeler event.preventDefault(); comme indiqué ci-dessous:

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

Pour vérifier ce comportement, vous pouvez vérifier ce violon: http://jsfiddle.net/vnathalye/8Yz7S/301 /

Essayez-le après avoir commenté la ligne event.preventDefault(); et vérifiez la console.

1
Vivek Athalye 27 janv. 2017 à 04:38

Vous souhaitez masquer autant de logique que possible de la vue. Donc, comme il l'a suggéré, utilisez

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

Ensuite, faites toute votre logique dans la fonction changemode ():

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

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

0
Josh 27 janv. 2017 à 02:19