Angular - ng-model Demo

ng-model, ng-show, ng-click, ng-submit

by Marventus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h2>My AngularJS Form</h2>
<div ng-app="myApp">
  <form id="myForm" name="myForm" ng-controller="FormController">
    <div class="form-group">
      <input id="firstName" name="firstName" type="text" placeholder="First Name" ng-model="newUser.firstName" />
    </div>
    <div class="form-group">
      <input id="lastName" name="lastName" type="text" placeholder="Last Name" ng-model="newUser.lastName" />
    </div>
    <div class="form-group">
      <input id="userEmail" name="userEmail" type="email" placeholder="Email" ng-model="newUser.userEmail" />
    </div>
    <div class="form-group">
      <input id="subscribe" name="subscribe" type="checkbox" ng-model="newUser.subscribeNews" />
      <label for="subscribe">Subscribe to our newsletter</label>
    </div>
    <p><strong>First Name: </strong>{{newUser.firstName}}</p>
    <p><strong>Last Name: </strong>{{newUser.lastName}}</p>
    <p><strong>Email: </strong>{{newUser.userEmail}}</p>
    <p><strong>Subscribe: </strong>{{newUser.subscribeNews}}</p>
  </form>
</div>

CSS

h2 {
  text-align: center;
}

form {
  border: 1px solid #ddd;
  margin: 0 auto;
  padding: 1em;
  width: 70vw;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("FormController", ["$scope", function($scope) {
  $scope.newUser = {
    firstName: '',
    lastName: '',
    userEmail: '',
    subscribeNews: false
  };
}]);