DevPHP DevPHP - 1 year ago 156
AngularJS Question

Angularjs Wizard hide wz-step

How I can hide a wz-step depending on a value of a previous step?


<wizard on-finish="submit()" hide-indicators="true" currentStep="data">
<wz-step wz-title="onestep">
<p>Show two step?</p>
<md-radio-group ng-model="data.question" class="md-primary">
<md-radio-button ng-value="1"> Yes </md-radio-button>
<md-radio-button ng-value="0"> No </md-radio-button>
<md-button type="submit" wz-next>NEXT</md-button>
<wz-step wz-title="twostep" ng-show="data.question == 1">
//Two step, show if data.question = 1
<wz-step wz-title="finalstep">
<md-button type="submit" wz-next class="md-raised">Submit</md-button>

My js: = {
question: 0,

I tried with ng-show and ng-if, with ng-show always shown and with ng-if never does :(

I hope you can help me, thanks in advance.

Answer Source

You could use ng-hide when the user clicks on the next step.

For example:

 <div ng-hide = "show">
          <input type="text" ng-model="test"/>

<input type="button" ng-click="MyFunction" value="Next">


$ = false;
$scope.MyFunction = function(){
    if($scope.test == null){ // or undefined...
          $ = true;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download