var app = angular.module('myApp',[]);
<form> <div class="form-item"> <label>First Name </label> <input type="text" ng-change="fName" ng-model="fName"/> </div> <div class="form-item"> <label>Last Name </label> <input type="text" ng-change="lName" ng-model="lName"/> </div> <div class="form-item"> <label>Show Preview <input type="checkbox" ng-model="checked"/></label> </div> <div class="form-item"> <input type="submit" name="Submit" id="Submit"/> </div> </form> <div ng-show="checked" class="preview"> <p ng-show="fName || lName"><b>Preview</b></p> <p ng-show="fName">Your First Name: {{fName}}</p> <p ng-show="lName">Your Last Name: {{lName}}</p> </div>
*{ font-family: arial; font-size: 13px; } form{ padding: 10px 20px; background: #eee; border: 1px solid #ddd; } .form-item{ margin: 10px 0; overflow:hidden; } .preview{ padding: 5px 20px; background: #eee; border: 1px solid #ddd; } .preview h2{ margin: 0; }