angularjs - Computing values based on multiple fields using Angular JS -
i'm attempting compute value of multiple fields using angular js (keep in mind, never used angular before, , thought problem i'm attempting solve).
so, have page multiple products. each product has associated id, price, upc, etc. idea is, select quantity , total calculated you go. hence, thought using angular data-binding technique work this.
here's have 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 = (b.which) ? b.which : b.keycode; if ((a < 48 || > 57) && (a < 96 || > 105) && (a < 37 || > 40) && != 8 && != 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..."); (var = 0; < 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
your approach working against angular. you'd better off defining items javascript objects, , using build html, rather 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; (var = 0; < $scope.items.length; i++) { total += $scope.items[i].price * $scope.items[i].quantity; }; return total; };
Comments
Post a Comment