Skip to content

Instantly share code, notes, and snippets.

@Shawful
Created October 5, 2014 19:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shawful/f8dc97d6fd88bbb111f9 to your computer and use it in GitHub Desktop.
Save Shawful/f8dc97d6fd88bbb111f9 to your computer and use it in GitHub Desktop.
<!-- Modal -->
<div ng-controller="regCtrl">
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <h4>Registration</h4> -->
<br>
<br>
</div>
<wizard on-finish="finishedWizard()">
<wz-step title="General Info">
<!-- <h1>This is the first step</h1> -->
<!-- <p>Here you can use whatever you want. You can use other directives, binding, etc.</p> -->
<div class="modal-body">
<div class="form-group">
<form name="registration">
<!-- method="POST" onsubmit="" -->
<!-- class="form-horizontal" role="form" -->
<br>
<!-- <ng-form name="generalInfo"> -->
<div class="form_group">
<div class="row">
<label for="contact-firstName" class="col-lg-2 control-label">First Name:</label>
<div class="col-lg-4">
<input type="text" name="firstName" class="form-control" id="contact-name" placeholder="Jane/John (required)" ng-model="$parent.firstName" required ng-change="updateGeneralInfo()">
<!-- <span ng-show="{{true}}">Username is required.</span> -->
</div>
<label for="contact-lastName" class="col-lg-2 control-label">Last Name:</label>
<div class="col-lg-4">
<input type="text" name="lastName" class="form-control" id="contact-name" placeholder="Doe (optional)" ng-model="$parent.lastName" ng-change="updateGeneralInfo()">
</div>
</div>
</div>
<div class="form=group">
<div class="row">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" name="email" class="form-control" id="contact-email" required placeholder="you@gmail.com (required)" ng-model="$parent.email" ng-minLength=3 ng-change="updateGeneralInfo()">
</div>
</div>
</div>
<br>
<div class="form=group">
<div class="row">
<label for="contact-age" class="col-lg-2 control-label">Age:</label>
<div class="col-lg-4">
<!-- Single button -->
<input type="number" class="form-control" min="18" max="115" id="contact-age" required placeholder="18 (required)" ng-model="$parent.age" ng-change="updateGeneralInfo()">
</div>
</div>
</div>
<br>
<div class="form=group">
<div class="row">
<label for="contact-sex" class="col-lg-2 control-label">Sex:</label>
<div class="col-lg-4">
<!-- Single button -->
<div class="btn-group">
<label class="btn btn-info" ng-change="updateGeneralInfo()" ng-model="$parent.sex" btn-radio="'Female'">Female</label>
<label class="btn btn-info" ng-change="updateGeneralInfo()" ng-model="$parent.sex" btn-radio="'X'">X</label>
<label class="btn btn-info" ng-change="updateGeneralInfo()" ng-model="$parent.sex" btn-radio="'Male'">Male</label>
</div>
</div>
</div>
</div>
<!-- validStepOne: {{validStepOne}}
<br>validFirstName: {{validFirstName}}
<br>validLastName: {{validLastName}}
<br>validEmail: {{validEmail}}
<br>validAge: {{validAge}}
<br>validSex: {{validSex}}
<br>validLastName: {{validLastName}}
<br>firstName: {{firstName}}
<br>lastName: {{lastName}}
<br>email: {{email}}
<br>age: {{age}}
<br>sex: {{sex}} -->
</div>
<!-- <div class="btn-group"> -->
<!-- <div class="modal-footer"> -->
<ul class="pager">
<li>
<large class="error" ng-hide="validStepOne">* Please fill out all required info correctly to proceed.</large>
<br>
<br>
<!-- <small class="error" ng-show="!validFirstName">Please provide your first name</small> -->
<small class="error" ng-show="!validEmail">Please enter a valid email address</small>
<br>
<!-- <small class="error" ng-show="!validAge">You must be old enough to vote</small>
<br> -->
<!-- <small class="error" ng-show="!validSex">Please select a sex</small>
<br> -->
<br>
<a>
<input ng-disabled="!validStepOne" class="btn btn-primary navbar-btn" type="submit" id="contactInfo" ng-click="validateContact();" value="next" wz-next></input>
</a>
</li>
</ul>
<!-- </ng-form> -->
</form>
<!-- </div> -->
<!-- </form> -->
<!-- </div> -->
<!-- <div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div> --></div>
</wz-step>
</wizard>
</div>
</div>
</div>
</div>
@sbJerome
Copy link

Did you ever come across the issue when whee ng-model doesn't appear to move across steps? By the time i get to the end of the wizard, my ng-model is empty and I have no data from any of the inputs.. =\

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment