如何隐藏/显示基于先前填充字段(模型值)的条件的角向导步骤

How to hide/show angular-wizard steps based on conditions with previous filled in fields (model values)

本文关键字：模型 条件 向导 字段 于先前 隐藏 何隐藏 显示 填充      更新时间：2023-09-26

我使用的是angular向导。我想隐藏和显示基于条件的角度向导步骤。

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

简单，用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");
    }
}


超文本标记语言下一个

      <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>
相关文章：