Question

我正在使用angular-wizard。我想根据条件隐藏并显示角度向导步骤。

html代码：

<section id="main_content" class="inner main-inner" ng-app="wizard-sample" ng-controller="WizardCtrl" ng-cloak>
        <wizard on-finish="finished()" >

          <wz-step title="Step One">
            <h1>Step One</h1>
             <a title="Go to Step Two" wz-next class="m-btn blue pull-right" style="margin-right: 50px">Next <i class="m-icon-swapright m-icon-white"></i></a>
          </wz-step>

          <wz-step title="Step Two">
            <h1>Step Two</h1>
            <a title="Go to Step One" wz-previous class="m-btn blue"><i class="m-icon-swapleft m-icon-white"></i> Previous</a>
            <a title="Go to Finish" wz-next class="m-btn blue pull-right" style="margin-right: 50px">Next <i class="m-icon-swapright m-icon-white"></i></a>
          </wz-step>

          <wz-step title="Finish">
            <h1>Finish</h1>
            <a title="Go to Step Two" wz-previous class="m-btn blue"><i class="m-icon-swapleft m-icon-white"></i> Previous</a>            
          </wz-step>

        </wizard>
      </section>

控制器代码：

angular.module('wizard-sample', ['mgo-angular-wizard'])
.controller('WizardCtrl', function($scope, WizardHandler) {
    $scope.finished = function() {
        alert("Wizard finished :)");
    }

    $scope.logStep = function() {
        console.log("Step continued");
    }

    $scope.goBack = function() {
        WizardHandler.wizard().goTo(0);
    }
});

Answer 1

简单，使用ng-hide="Your Condition Goes Here"

或者，如果您的意思是想要跳过条件，您可以使用wz-next="checker()"在调用下一个元素之前调用此函数。并使用goTo()跳过元素。示例
JS

var checker = function(){
    if(isTrue){
        WizardHandler.wizard().goTo("Widard item number or title here");
    }
}

HTML 下一个

      <wz-step title="Step Two">
        <h1>Step Two</h1>
        <a title="Go to Step One" wz-previous class="m-btn blue"><i class="m-icon-swapleft m-icon-white"></i> Previous</a>
        <a title="Go to Finish" wz-next="checker()" class="m-btn blue pull-right" style="margin-right: 50px">Next <i class="m-icon-swapright m-icon-white"></i></a>
      </wz-step>

      <wz-step title="Finish">
        <h1>Finish</h1>
        <a title="Go to Step Two" wz-previous class="m-btn blue"><i class="m-icon-swapleft m-icon-white"></i> Previous</a>            
      </wz-step>

如何根据先前填入的字段（模型值）的条件隐藏/显示角度向导步骤

1 个答案: