有人使用
http://vadimg.com/twitter-bootstrap-wizard-example(带有angularjs路由和控制器的Twitter Bootstrap Wizard插件
我们可以使用它来处理onPrevious和onNext并使用ng-click
$('#rootwizard')。导航错误JavaScript。 如何从onNext和onPrevious
中访问索引和导航示例代码。
nbf4_app.controller('modesController', function($scope, $http)
{
console.log("modesController");
$scope.result = {};
$scope.init = function()
{
$('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index)
{
return false;
}
});
};
$scope.onPrevious = function()
{
console.log("onPrevious");
var $total = $('#rootwizard').navigation.find('li').length;
var $current = $('#rootwizard').index+1;
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total)
{
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
}
else
{
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
};
$scope.onNext = function()
{
console.log("onNext");
var t = $('#rootwizard').bootstrapWizard.navigation;
var $total = $('#rootwizard').navigation.find('li').length;
var $current = $('#rootwizard').index+1;
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total)
{
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
}
else
{
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
};
$scope.onFinish = function()
{
console.log("onFinish");
};
$scope.init();
});
谢谢, 纳伊姆