CODEWITHSUNDEEP
angularjs
shparkison
shparkison

Reputation: 973

Computing values based on multiple fields using Angular JS

I'm currently attempting to compute the value of multiple fields using Angular JS (keep in mind, never used Angular before, and thought it would be good for this problem I'm attempting to solve).

So, I have a page with multiple products. Each product has an associated ID, price, upc, etc. The idea is, you select a quantity and the total will be calculated for you as you go. Hence, I thought using the Angular data-binding technique would work well for this.

Here's what I have thus far...

HTML

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Multiple products – Total calculation</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="custom.js"></script>
</head>

<body>
  <div class="main" ng-app="wholesaleApp" ng-controller="ItemListController">

    <div data-alert class="alert-box success">
      <b>Total:</b>
      <input type="text" id="txtTotalFx" ng-value="total()" />
    </div>

    <div class="small-12 large-7 columns">
      <div class="row">
        <div class="small-12 large-12">
          <p>
            Item: <strong>51001</strong>
            <br/> Size: <strong>60 caps</strong>
            <br/> UPC: <strong>759160-51001-9</strong>
            <br/>
            <br/> Price: <strong>$12.00</strong> ea.
          </p>
        </div>
        <div class="clearfix"></div>
        <div class="small-8 large-8 product" data-item-id="51001">
          <input id="product_51001" type="hidden" name="product[]" value="51001/" />
          <input id="product_51001" type="hidden" name="product[]" value="759160-51001-9/" />
          <input id="product_51001" type="hidden" name="product[]" value="12.00/" ng-model='price.51001' />
          <input id="product_51001" type="text" onkeydown="return isNumber(event);" name="product[]" value="" ng-model='qty.51001' />
          <input id="product_51001" type="hidden" name="product[]" value="," />
        </div>
      </div>
    </div>

    <div class="small-12 large-7 columns">
      <div class="row">
        <div class="small-12 large-12">
          <p>
            Item: <strong>51002</strong>
            <br/> Size: <strong>120 caps</strong>
            <br/> UPC: <strong>759160-51002-6</strong>
            <br/>
            <br/> Price: <strong>$21.00</strong> ea.
          </p>
        </div>
        <div class="clearfix"></div>
        <div class="small-8 large-8 product" data-item-id="51002">
          <input id="product_51002" type="hidden" name="product[]" value="51002/" />
          <input id="product_51002" type="hidden" name="product[]" value="759160-51002-6/" />
          <input id="product_51002" type="hidden" name="product[]" value="21.00/" ng-model='price.51002' />
          <input id="product_51002" type="text" onkeydown="return isNumber(event);" name="product[]" value="" ng-model='qty.51002' />
          <input id="product_51002" type="hidden" name="product[]" value="," />
        </div>
      </div>
    </div>

    <div class="small-12 large-7 columns">
      <div class="row">
        <div class="small-12 large-12">
          <p>
            Item: <strong>59901</strong>
            <br/> Size: <strong>60 caps</strong>
            <br/> UPC: <strong>759160-59901-4</strong>
            <br/>
            <br/> Price: <strong>$12.50</strong> ea.
          </p>
        </div>
        <div class="clearfix"></div>
        <div class="small-8 large-8 product" data-item-id="59901">
          <input id="product_59901" type="hidden" name="product[]" value="59901/" />
          <input id="product_59901" type="hidden" name="product[]" value="759160-59901-4/" />
          <input id="product_59901" type="hidden" name="product[]" value="More Milk Special Blend Capsules/" />
          <input id="product_59901" type="text" onkeydown="return isNumber(event);" name="product[]" value="" ng-model='qty.59901' />
          <input id="product_59901" type="hidden" name="product[]" value="," />
        </div>
      </div>
    </div>

    <div class="small-12 large-7 columns">
      <div class="row">
        <div class="small-12 large-12">
          <p>
            Item: <strong>58002</strong>
            <br/> Size: <strong>2oz.</strong>
            <br/> UPC: <strong>759160-58002-9</strong>
            <br/>
            <br/> Price: <strong>$10.00</strong> ea.
          </p>
        </div>
        <div class="clearfix"></div>
        <div class="small-8 large-8 product" data-item-id="58002">
          <input id="product_58002" type="hidden" name="product[]" value="58002/" />
          <input id="product_58002" type="hidden" name="product[]" value="759160-58002-9/" />
          <input id="product_58002" type="hidden" name="product[]" value="10.00/" ng-model='price.58002' />
          <input id="product_58002" type="text" onkeydown="return isNumber(event);" name="product[]" value="" ng-model='qty.58002' />
          <input id="product_58002" type="hidden" name="product[]" value="," />
        </div>
      </div>
    </div>

  </div>
</body>

</html>

JS

function isNumber(b) {
  if (b) {
    var a = (b.which) ? b.which : b.keyCode;
    if ((a < 48 || a > 57) && (a < 96 || a > 105) && (a < 37 || a > 40) && a != 8 && a != 46) {
      return false
    }
  }
  return true
}

(function(angular) {
  'use strict';
  var products = [];

  $(".product").each(function() {
    products.push($(this).data("item-id"));
  });

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

  app.controller('ItemListController', function($scope) {
    $scope.total = function() {
      var total = 0;
      console.log("entered total function...");

      for (var i = 0; i < products.length; i++) {
        var qty = "price." + products[i];
        var price = "qty." + products[i];
        console.log("qty: " + qty + ", price: " + price + "\n");
        total += ($scope.price * $scope.qty) || 0;
        console.log("total: " + total + "\n")
      }
      return total || 0;
    };

  });
})(window.angular);

And, Plunker setup: http://plnkr.co/edit/tBhm37E0gaWjwC5cIzdT?p=preview

Upvotes: 0

Views: 160

Answers (1)

dave
dave

Reputation: 64657

Your approach is really working against angular. You'd be much better off defining the items as javascript objects, and using that to build the html, rather than the other way around:

HTML:

<div class="small-12 large-7 columns">
  <div class="row" ng-repeat="item in items">
    <div class="small-12 large-12">
      <p>
        Item: <strong>{{item.id}}</strong>
        <br/> Size: <strong>{{item.size}}</strong>
        <br/> UPC: <strong>{{item.upc}}</strong>
        <br/>
        <br/> Price: <strong>{{item.price | currency}}</strong> ea.
        <br><label>Quantity:</label>
        <input type="number" ng-model="item.quantity"/>
      </p>
    </div>

  </div>
</div>

JS:

$scope.items = [{
  id: 510001,
  size: '60 caps',
  upc: '759160-51001-9',
  price: 12,
  quantity: 0
}, {
  id: 51002,
  size: '120 caps',
  upc: '759160-51002-6 ',
  price: 21,
  quantity: 0
}, {
  id: 59901,
  size: '60 caps',
  upc: '759160-59901-4',
  price: 12.50,
  quantity: 0
}, {
  id: 58002,
  size: '2oz',
  upc: '759160-58002-9 ',
  price: 10,
  quantity: 0
}, ];
$scope.total = function() {
  var total = 0;
  for (var i = 0; i < $scope.items.length; i++) {
    total += $scope.items[i].price * $scope.items[i].quantity;
  };
  return total;
};

http://plnkr.co/edit/8vSlHnvEkIy5b3wvIXRW?p=preview

Upvotes: 1

Related Questions