Angular 1.X Form Example

by Tim Ambler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.css">
<div class="container-fluid" ng-controller="formController">

    <form name="myForm">
    
        <div class="row">
        
            <div class="col-xs-12 form-group">
                <label>First Name</label>
                <input type="text" class="form-control" ng-model="model.first_name">
            </div>
            
            <div class="col-xs-12 form-group">
                <label>Last Name</label>
                <input type="text" class="form-control" ng-model="model.last_name">
            </div>            
            
            <div class="col-xs-12">
                <pre><code ng-bind="output"></code></pre>
            </div> 
        
        </div>
    
    </form>

</div>

JavaScript

var app = angular.module('app', []);

app.controller('formController', function($scope) {

	$scope.model = {};
    
    $scope.$watch('model', function(newValue, oldValue) {
		$scope.output = JSON.stringify($scope.model, null, 4);
    }, true);

});

angular.bootstrap(document, ['app']);