带有angularjs的UI向导

时间:2015-10-26 17:12:28

标签: javascript angularjs twitter-bootstrap-3

有人使用

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();

});

谢谢, 纳伊姆

0 个答案:

没有答案