angular js event enter to call a function on the element tr

Question

I can move up and down with the keyboard keys but i cannot get the enter event correct

**Controller**

$scope.myFunction = function()
{
    alert('sadsad');
    alert('hi');
}

**Also i added directive like this** 

.directive('ngEnter', function () 
    {
        restrict:'use strict';
        return {
           link: function (scope, elements, attrs) {
              elements.bind('keydown keypress', function (event) {
                  if (event.which === 13) {
                      scope.$apply(function () {
                          scope.$eval(attrs.ngEnter);
                      });
                      event.preventDefault();
                  }
              });
           }
        };
    });

  **Below is the view code on which i m calling directive and function**

<tr  class="find"ng-repeat="busServices in  " ng-click="setSelected(busServices.bus_travel_id,this.busServices,$event)"  ng-class="{selectedsd:busServices.bus_travel_id === idSelected}" ng-mouseover="ShowHideBoarding($event,this.busServices,true)" ng-mouseleave="ShowHideBoarding($event,false)" ng-init="($first) ? setSelected(busServices.bus_travel_id,this.busServices) : ''" ng-enter="myFunction()"></tr>

ng-enter doesnt get called at all. what can i do so that ng enter can work.

Basically, ng-enter will work if you use that in any input field. But you are using in . Otherwise try to focus that element and press enter(May be or may it will work) — Srigar, Apr 10 '17 at 11:42
Also review the `restrict` option of your directive. It cannot be `use strict`, it should be `"A"` for example — devnull69, Apr 10 '17 at 11:55
Possible duplicate of [How to use a keypress event in AngularJS?](http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs) — RIYAJ KHAN, Apr 10 '17 at 11:59
... furthermore, the restrict option must be used inside the object that you return. The way you are using it is wrong syntax — devnull69, Apr 10 '17 at 12:01

devnull69 · Answer 1 · 2017-04-10T12:45:12.553

0

Try something like this

.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keypress", function (event) {
            if(event.keyCode === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

The restrict option can be omitted.

EDIT: You will have to add an attribute to your <tr> so that they can be focussed and receive key* events:

<tr tabindex="0" ....>

Replace 0 with other numbers for more of your focussable <tr>

edited Apr 10 '17 at 12:45

answered Apr 10 '17 at 12:02

devnull69

16,402
8
50
61

See latest edit ... at least you can try. Normally `tr` elements are not meant to receive key* events – devnull69 Apr 10 '17 at 12:43
any alternative in javascript? – mittal chande Apr 10 '17 at 12:56
Then you are out of options. It means that your table row cannot accept the keypress event. What is your idea behind this concept? How do you want to make sure that one of your table rows is the "current element" you want to bind the `enter` key to? – devnull69 Apr 10 '17 at 12:59
In the table the rows are bus services when user hits enters on of of those bus services a function is called on hit if enter to load the seat layout on the basis of data present in the selected rows – mittal chande Apr 10 '17 at 13:02
You are talking about "hit enter on a row" and "selected row" ... what EXACTLY do you mean? How does your web app make one of the rows the selected one? – devnull69 Apr 10 '17 at 13:05
u can go down and up on the table rows . select one row , it becomes green when selected (as shown in the image) once u hit enter it will show seat layout of the bus (where the loading gif is shown in the image attached) – mittal chande Apr 10 '17 at 13:09
So your table row selection is a logical one (rather than a technical one, like the browser element focus). So you could use the keypress event on the document (e.g. the body element) and logically check which element is the current selected one. Keypress event on document should work – devnull69 Apr 10 '17 at 13:12

angular js event enter to call a function on the element tr

1 Answers1