Computing values based on multiple fields using Angular JS

Question

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

Nothing happens to the total, the ng-value="total()" portion. Also, have some console.log's in there to try and see what's going on and it doesn't even look like the $scope.total = function() is being called? — shparkison
– shparkison, Commented Jun 10, 2015 at 17:36

dave · Accepted Answer · 2015-06-10 17:42:22Z

1

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

answered Jun 10, 2015 at 17:42

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shparkison Over a year ago

Thanks @dave, but unfortunately the document is rendered via PHP. So don't think your solution will work. I'll see if I can modify further to get it working with the pre-rendered HTML.

dave Over a year ago

Do you not have access to the php?

shparkison Over a year ago

I suppose so, but have a decent amount of logic in there, and multiple loops. But, looking at it further might not be as hard as I initially thought to have it simply build the javascript objects as apposed to outputting the html. Will give it a go and come back to mark as the answer if successful ;)

shparkison Over a year ago

Ok, managed to wrap the PHP up to output the various products/categories as JS objects, then plug that into Angular, basically using what you posted above. Works great! Thanks!!

Collectives™ on Stack Overflow

Computing values based on multiple fields using Angular JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related