JSFiddle - React, Tailwind, and code Playground

by Dave Alperovich

HTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <form id="itemlist" method="post" enctype="multipart/form-data">
            <input type="hidden" id="ranges" name="ranges" value="1-3" />
            <input type="text" placeholder="Item" id="R1_A_1" name="A_1" size="20" class="form_item" value="HDD Baracuda Black 2TB" /> <span id="R1_min_1" class="plusminus" ng-click="chngeQty(R1_1, -1)">-</span>

            <input type="text" placeholder="Qty" id="R1_B_1" name="B_1" size="2" class="form_qty" ng-model="R1_1.quantity" /> <span id="R1_plus_1" class="plusminus" ng-click="chngeQty(R1_1, 1)">+</span>

            <input type="text" placeholder="Price" id="R1_C_1" name="C_1" size="5" class="form_price" ng-model="R1_1.price" />
            <input type="text" placeholder="Disc." id="R1_D_1" name="D_1" size="3" class="form_discount" ng-model="R1_1.disc" />
            <input type="text" placeholder="Sum" id="R1_E_1" name="E_1" size="6" class="form_sum" ng-change="computePrice(R1_1)" ng-model="R1_1.sum" />
            <br />
            <input type="text " placeholder="Item " id="R1_A_2 " name="A_2 " size="20 " class="form_item " value="Motherboard ASus XYZ " /> <span id="R1_min_2 " class="plusminus ">-</span>

            <input type="text " placeholder="Qty " id="R1_B_2 " name="B_2 " value="1 " size="2 " class="form_qty " /> <span id="R1_plus_2 " class="plusminus ">+</span>

            <input type="text " placeholder="Price " id="R1_C_2 " name="C_2 " size="5 " class="form_price " value="46 " />
            <input type="text " placeholder="Disc. " id="R1_D_2 " name="D_2 " size="3 " class="form_discount " />
            <input type="text " placeholder="Sum " id="R1_E_2 " name="E_2 " size="6 " class="form_sum " />
            <br />
            <input type="text " placeholder="Item " id="R1_A_3 " name="A_3 " size="20 " class="form_item " value="Memory Kingston DDR3 4GB " /> <span id="R1_min_3 " class="plusminus ">-</span>

            <input type="text "...

CSS

.plusminus {
      font-weight: bold;
      font-family: monospace;
      font-size: 1.3em;
      border: 1px green solid;
      padding: 0px 5px;
  }

JavaScript

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

function MyCtrl($scope) {

    $scope.bindObjectWatch = function (item) {
        $scope.$watch(item.name + '.quantity', $scope.computeSum);
        $scope.$watch(item.name + '.price', $scope.computeSum);
        $scope.$watch(item.name + '.disc', $scope.computeSum);

    }

    $scope.computeSum = function () {
        if (!($scope.R1_1.priceCalc == true)) {
            $scope.R1_1.sum = ($scope.R1_1.quantity * $scope.R1_1.price) * (100 - $scope.R1_1.disc) / 100;
            //alert(55);
            $scope.R1_1.priceCalc = false;
        }

    };

    $scope.chngeQty = function (item, amount) {
        item.quantity += amount;
    }

    $scope.computePrice = function (item) {
        if ((item.sum || 0) > 0) {
            item.price = (item.sum / (100 - (item.disc || 0))) * 100 / item.quantity;
        }
        item.priceCalc = true;
        //alert(price);
    };


    $scope.R1_1 = {
        quantity: 1,
        price: 27,
        disc: 50,
        priceCalc: false,
        name: 'R1_1'
    };

    $scope.bindObjectWatch($scope.R1_1);
    //alert( $('$scope.R1_1');
}