Angular - Demo - Jan31

by Santosh Thakur

HTML

<div ng-app="couponApp">

  <div class="col-xs-6 col-xs-offset-0">
    <div class="form-horizontal row" ng-controller="valueController1">
      <div class="form-group">
        <label class="control-label col-xs-3" for="value1">Value 1 :</label>
        <div class="col-xs-9">
          <input type="number" class="form-control" id="value1" ng-model="v1" placeholder="Enter First Number">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-3" for="value2">Value 2 :</label>
        <div class="col-xs-9">
          <input type="number" class="form-control" id="value2" ng-model="v2" placeholder="Enter Second Number">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-3" for="value2">Sub Total Value :</label>
        <div class="col-xs-9">
          <input type="number" disabled class="form-control" ng-model="total" id="value2" placeholder="Sub Total">
        </div>
      </div>

      <button class="btn btn-default" ng-click="totalAdd()">Click to add</button>

    </div>
  </div>


  <div class="col-xs-6 col-xs-offset-6">
    <div class="form-horizontal row" ng-controller="valueController2">
      <div class="form-group">
        <label class="control-label col-xs-3" for="email">Sub Total Value :</label>
        <div class="col-xs-9">
          <input type="number" class="form-control" id="value 1" placeholder="Total Value">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-3" for="pwd">Coupon Value :</label>
        <div class="col-xs-9">
          <input type="number" class="form-control" id="value 2" placeholder="Coupon code">
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-xs-3" for="pwd">Total Value :</label>
        <div class="col-xs-9">
          <input type="number" disabled class="form-control" id="value 2" placeholder="Total Value">
        </div>
     ...

CSS

.col-xs-6 > .form-horizontal {
  padding: 30px;
}

.col-xs-6:nth-child(1) > .form-horizontal {
  background-color: rgba(201, 210, 150, 0.8);
}

.col-xs-6:nth-child(2) > .form-horizontal {
  background-color: rgba(201, 210, 150, 0.5);
}

.col-xs-6:nth-child(3) > .form-horizontal {
  background-color: rgba(201, 210, 150, 0.8);
}

JavaScript

// console.log(angular);

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

 couponApp.factory('Data', function() {
   var data = [];
   data = {
     v1: 1,
     v2: 2
   }
   return data;
 });

 couponApp.controller('valueController1', function($scope) {
   $scope.v1 = 1;
   $scope.v2 = 2;
   $scope.total = [];
   $scope.totalAdd = function(item) {
     $scope.total = $scope.v1 + $scope.v2;
   };
 });

 couponApp.controller('valueController2', function($scope) {

 });

 couponApp.controller('valueController3', function($scope) {

 });