ng-show ng-hide using controller

Question

I am trying to edit a field and convert label into text field on click of a button and change it back to label on keypress event (ng-keypress).

I am changing the ng-show variable through controller but it is not working.

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

My updated JS-Fiddle link: http://jsfiddle.net/8Yz7S/281/

Sajeetharan · Accepted Answer · 2017-01-27 02:17:56Z

2

Use ng-blur instead of ng-keypress,

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

DEMO

EDIT:

Use the following directive to handle the enter key event,

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

edited Jan 27, 2017 at 2:17

answered Jan 27, 2017 at 1:15

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FenderBender Over a year ago

Then it will chnage to label as soon as I start typing.

FenderBender Over a year ago

I want to edit the field and then wehn I press enter it should change back to label

Sajeetharan Over a year ago

@Rachel Check the updated answer, here is the demo jsfiddle.net/sajeetharan/44ywy10x

GrabNewTech · Accepted Answer · 2017-01-27 02:49:28Z

1

Can you try the below solution.

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

Added interval to update the view

function showCrtl($scope, $timeout){

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

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

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

edited Jan 27, 2017 at 2:49

answered Jan 27, 2017 at 2:15

GrabNewTech

6416 silver badges14 bronze badges

4 Comments

FenderBender Over a year ago

It times out and changes to label but the field is not updated.

GrabNewTech Over a year ago

After click of enter button the view updated to Channel and edit button. But i didnt get your problem clearly? Which field you are expecting to get updated?

FenderBender Over a year ago

I updated my fiddle to make it more clear: jsfiddle.net/8Yz7S/281

GrabNewTech Over a year ago

Updated the fiddle, I hope your issue will get solved now. jsfiddle.net/gsjsfiddle/8Yz7S/298

Vivek Athalye · Accepted Answer · 2017-01-27 04:38:37Z

1

The reason its not working for you is that, you are not preventing the default behavior of Enter key. So After changemode function is executed and editmode is set to false, click event of Edit button is also getting executed, setting editmode back to true.

All you need to do is call event.preventDefault(); as shown below:

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

To verify this behavior you can check this fiddle: http://jsfiddle.net/vnathalye/8Yz7S/301/

Try it after commenting the line event.preventDefault(); and check the console.

answered Jan 27, 2017 at 4:38

Vivek Athalye

2,9792 gold badges24 silver badges34 bronze badges

1 Comment

FenderBender Over a year ago

Thank you for explaining

Josh · Accepted Answer · 2017-01-27 02:19:30Z

0

You want to obfuscate as much logic as possible from the view. So as he suggested, use

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

Then, do all your logic inside the changemode() function:

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

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

edited Jan 27, 2017 at 2:19

answered Jan 27, 2017 at 1:50

Josh

3312 silver badges15 bronze badges

1 Comment

Josh Over a year ago

You might need to use a timeout to force the digest cycle: jsfiddle.net/8Yz7S/293

Collectives™ on Stack Overflow

ng-show ng-hide using controller

4 Answers 4

3 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related