need to extend ng-model-options to work with enter and tab key events in Angualrjs applciation

[Mn Kishore]

I have the following input box with ng-options :

<input ng-model="name"  ng-model-options="{ updateOn: 'blur'}" 
 ng-change="addNewDpt()" type="text">

 $scope.addNewDpt = function(){
    // code 
 }

If I make some entry in the text box and click the mouse somewhere outside the input text box then function addNewDpt is getting executed and also the model name is getting update properly, which is fine. Now I want the same to happen, if I click enter or tab keys in the text box. How can I achieve it?

[Rajasekhar Reddy Neerubai]

Hi,

When you are making entry in text box , you are making changes to model.

1. ng-change gets activated and performs addNewOpt function gets executed.

2. when mouse is clicked outside text box , form field input text box gets blurred and updateOn will get activated and your updates will happen.

Coming to your question,

use ng-keyup="cancel($event)' if you want to cancel updates or other events.

or you can even use keypress events instead of blur for immediate updates

[Sander Elias]

Hi Mn,

In my sample, the tab key worked ‘out of the box’. However, I added an form element to make the enter work. That makes sense, because without a form, in a input enter it is just a ‘null’ operator.

Does this make sense to you?

Regards
Sander

​

[Vaibhav Gupta]

Hi,

@Sander +1 for the answer. This is a very eligant solution. 

Regards,

Vaibhav Gupta

[Mn Kishore]

@Sander, As usual your solution is smart and charm in solving the issue. Thanks a lot, the problem is solved after keeping the input element in form.

Regards,

Kishore Babu M. N. 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/aB_vzogjKSY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.