[英]AngularJS - Multistep form with UI Router and Navigate using arrow keys
如何使用箭头键转到下一个或上一个表单步骤。 我正在使用AngularJS UI路由器。 下面的代码与prev和下一个按钮一起正常工作。
.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');
})
我要做的就是这样做
<button type="button" ui-sref="wsp.first_step">Prev </button>
<button type="button" ui-sref="wsp.third_step">Next</button>
这个给你。 具有自处理事件解除绑定的keydown event listener
,并在$stateChange
之前/之后绑定。 ng-keydown
在这里不会帮助你=(。希望在AngularJS中改进键处理。你应该把它添加到你的wspYearController
(如果它在你所说的所有路由中使用)。
/**
* 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();
});
这是一个向您展示它的掠夺者 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.