Use keyboard arrow keys to cycle through different modals in angularjs

Question

Brand new to AngularJS so any help would be greatly appreciated.

I have a modal that brings up some information about companies.

Link here: http://104.236.181.252:49156/#portfolio

As you can see i can move between companies using the previous and next buttons, however i want the user to be able to use left and right keyboard keys. I've used the ng-keydown directive inside a div but with no such luck. Here's my modal code that changes pages:

                <div class="modal-footer" ng-controller="portfolio">
                    <nav>
                        <ul class="pager">
                            <li class="previous"><a href="" ng-click="prevPage(co)"><span aria-hidden="true">&larr;</span> Previous</a></li>
                            <li class="next"><a href="" ng-click="nextPage(co)">Next<span aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                </div>

when i press either the left or right keyboard keys, i want to be able to cycle through prevPage(co) and nextPage(co) respectively.

EDIT

Here's my modal code:

<script type="text/ng-template" id="myModalContent.html" ng-keydown="">

                <div class="modal-header">
                    <img class="displayed lightbox" src="{{co.logo}}" tabindex="1">
                    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">
                        <span aria-hidden="true">&times;</span><span class="sr-only">
                        </span>
                    </button>

                </div>

                <div class="modal-body" id="currentModal">
                    <div class="social_links">
                        <a class="social_icon" href="{{co.url}}">
                            <img src="img/web.png">
                        </a>
                        <a class="social_icon" href="{{co.crunchbase_url}}">
                            <img src="img/crunchbase-2.png">
                        </a>
                        <a class="social_icon" href="{{co.angellist_url}}">
                            <img src="img/angellist.ico">
                        </a>
                        <a class="social_icon" href="{{co.twitter_url}}">
                            <img src="img/icon-twitter.png">
                        </a>
                    </div>
                    <div class="row companyd">
                        {{ co.investor_description }}
                        <div class="line-separator" ng-if="co.founders"></div>
                        <h5 ng-if="co.founders">Founders</h5>
                            <div ng-repeat="founder in co.founders" >
                                <div class="span-4 founderimg" ng-if="co.founders.length == 3">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-6 founderimg" ng-if="co.founders.length == 2">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-12 founderimg" ng-if="co.founders.length == 1">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-3 founderimg" ng-if="co.founders.length == 4">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                            </div>
                    </div>
                </div>

                <div class="modal-footer" ng-controller="portfolio">
                    <div ng-keypress="myFunct($event)">
                    <nav>
                        <ul class="pager">
                            <li class="previous"><a href="" ng-click="prevPage(co)"><span aria-hidden="true">&larr;</span> Previous</a></li>
                            <li class="next"><a href="" ng-click="nextPage(co)">Next<span aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                    </div>
                </div>
            </script>

score 1 · Accepted Answer · answered Dec 19 '14 at 01:08

You need to use ng-keydown instead of ng-keypress. Also it needs to be placed on the body and not the div as it won't fire if on the div.

<body ng-view="" ng-keydown="myFunct($event)">

  $scope.previous = function () {
    console.debug('Previous');
  };

  $scope.next = function () {
    console.debug('Next');
  };

  $scope.myFunct = function(keyEvent) {
    if (keyEvent.which === 37) {
        $scope.previous();
    }
    else if (keyEvent.which === 39) {
        $scope.next();
    }
  };

http://plnkr.co/edit/DQralzHFSW9aOuN5s9Pv?p=preview

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

I know you can use ng-keypress to execute code when any key is pressed. Using this information we can get to the following.

ng-keypress="myFunct($event)"

Then within the controller.

$scope.myFunct = function(keyEvent) {
    if (keyEvent.which === 13) {
        alert('Enter Pressed!');
    }
}

You can obviously edit the key number to whatever keys you would like. Then call prevPage() or nextPage() within there.

There is a similar question here. I relayed the information from there.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 19 '14 at 00:19

Eric E

572
1
4
16

Adding that directive to the div in my modal unfortunately doesn't call that method. – Dominooch Dec 19 '14 at 00:38
Well something you are doing isn't correct. Try making a dummy function with only an alert() in it to test. What version of angular are you using? I know ng-keypress is a newer directive. – Eric E Dec 19 '14 at 00:43
Wouldn't you need it in the body instead of just in the div? – Wayne Ellery Dec 19 '14 at 00:49
It seems that the arrow keys aren't firing the ng-keypress. Enter is as well as letters and numbers – Wayne Ellery Dec 19 '14 at 01:00
Perhaps try out ng-keydown? Check out this [link](http://stackoverflow.com/questions/25464579/is-it-possible-to-listen-for-arrow-keyspress-using-ng-keypress), it seems to work with ng-keypress too. – Eric E Dec 19 '14 at 01:02
So, my modal code is inside of a script in my html code. (I made an Edit above), and i have a separate controller for this modal that's only called during the modals instantion, so putting it in the body tag doesn't trigger it. – Dominooch Dec 19 '14 at 01:04
Well the above code works. It seems like you have some confusion regarding structuring your angular-js application. I would recommend that you further understand how your application works, as with the right understanding you should be able to apply one of these various methods to your application. Good luck. – Eric E Dec 19 '14 at 01:06
I'm also using latest version of Angular. 1.3 – Dominooch Dec 19 '14 at 01:07

Use keyboard arrow keys to cycle through different modals in angularjs

2 Answers2