Как скрыть/показать шаги углового мастера на основе условий с предыдущими заполненными полями (значения модели)

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>