MGJD - Do not touch DOM in Angular

Learn How to set/get form controls' values

by codef0rmer

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="alert alert-success" ng-hide='!processed'>
  <b>Well done!</b> We've successfully processed the order.
</div>
<div class="row" ng-hide='processed'>
  <div class="span6">
    <form class="form-horizontal">
      <legend>Billing Address</legend>
      <div class="control-group">
        <label class="control-label">Name:</label>
        <div class="controls">
          <input type="text" ng-model="billing_name" ng-change="reflect()" placeholder="Full Name">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">Address:</label>
        <div class="controls">
          <textarea ng-model="billing_address" ng-change="reflect()" cols="30" rows="4"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">City:</label>
        <div class="controls">
          <select ng-model="billing_city" ng-change="reflect()" ng-options="c.name for c in cities"></select>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <button class='btn btn-primary btn-large' ng-click="processed = true">Process Order</button>
        </div>
      </div>
    </form>
  </div>
  <div class="span6">
    <form class="form-horizontal">
      <legend>
        Shipping Address
        <input type="checkbox" ng-model="same" ng-change="reflect()">
        <small ng-class="{'strike': !same}">same as billing</small>
      </legend>
      <div class="control-group">
        <label class="control-label">Name:</label>
        <div class="controls">
          <input type="text" ng-model="shipping_name" placeholder="Full Name" ng-disabled="same">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">Address:</label>
        <div class="controls">
          <textarea ng-model="shipping_address"...

CSS

.strike { text-decoration: line-through; }

JavaScript

var App = angular.module('App', []);
App.run(function($rootScope) {
    $rootScope.cities = [
        {id: 'NM', name: 'Navi Mumbai'},
        {id: 'PN', name: 'Pune'}
    ];
    
    $rootScope.reflect = function() {
        if ($rootScope.same) {
            $rootScope.shipping_name = $rootScope.billing_name;
            $rootScope.shipping_address = $rootScope.billing_address;
            $rootScope.shipping_city = $rootScope.billing_city;
        }
    };
    
    // Dummy billing data
    $rootScope.billing_name = 'Amit Gharat';
    $rootScope.billing_address = 'Airoli';
    $rootScope.billing_city = $rootScope.cities[0];
    
    $rootScope.same = true;
    $rootScope.processed = false;
    
    // Dummy shipping data same as billing
    $rootScope.reflect();
});