1

I have one form which contains three input fields with their own Find button which fetches the different data based on the input. As of now all the buttons have input type="button" and they work on the click.

Users expect that on pressing enter button on keyboard, respective find should be called. That means if they have entered some text in field 1, it should trigger find of button1. not sure how to handle this using angularjs

Any thoughts on this will really help me.

kirtan
  • 289
  • 4
  • 13
java2017
  • 158
  • 2
  • 12
  • What about adding `ng-enter="testfunction()"` for each text input? – Will.Harris Jan 22 '16 at 09:47
  • @Will.Harris Thanks for the answer but I am not sure if its a standard angular directive. – java2017 Jan 22 '16 at 09:58
  • 1
    Apologies. If you are interested in creating your own directive check out the answer to this post then :) http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs – Will.Harris Jan 22 '16 at 10:02
  • Theres also an example of a similar directive in this fiddle http://jsfiddle.net/lsconyer/bktpzgre/1/ – Will.Harris Jan 22 '16 at 10:03
  • @Will.Harris the link you provided http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs led me to the answer. Thanks. – java2017 Jan 27 '16 at 01:58

1 Answers1

0

You need to use, ng-keypress directive of angular and call a function like this, ng-keypress = "submitForm($event)" in your html,

In your controller, check for the ENTER KEY using the event argument passed with the function, i.e

$scope.submitForm = function(e) {
 if(e.keyCode == 13) { // for enter key
   // do what ever you want
 }  
}

Note: you can also write your own directive for ENTER KEY

EDIT: In order to differentiate each keypress, pass another key as a argument with that function and call the appropriate service.

Alhuck
  • 1,029
  • 8
  • 11