How do I go to next or previous form step using arrow key. I'm using AngularJS UI Router. The code below working fine with prev and next button to navigate.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('wsp', {
url: '/wsp',
templateUrl: 'wsp_step',
controller: 'wspYearController'
})
.state('wsp.first_step', {
url: '/first_step',
templateUrl: 'wsp_step_first'
})
.state('wsp.second_step', {
url: '/second_step',
templateUrl: 'wsp_step_second'
})
$urlRouterProvider.otherwise('/wsp/first_step');
})
To go to different step I am doing like this
<button type="button" ui-sref="wsp.first_step">Prev </button>
<button type="button" ui-sref="wsp.third_step">Next</button>
Here you are. A keydown event listener
with self handling event unbinding and bind before/after $stateChange
. ng-keydown
will not help you here =(. Lets hope keyhandling will be improved in AngularJS. You should be fine by adding this into your wspYearController
(if its used in all the routes you talking about).
/**
* Key press binding
*/
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left arrow
case 39: // right arrow
//clean listener before state change
//else it would be listen all the time :)
$(document).unbind('keydown');
//back and forward all the time to the right place.
if ($state.current.name === 'wsp.first_step') {
$state.go('wsp.second_step');
} else {
$state.go('wsp.first_step');
}
break;
default: return; // exit this handler for other keys
}
// prevent the default action (scroll / move caret)
e.preventDefault();
});
Here is a plunker which shows you a demonstration of it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.