It was not certain how to properly ask questions, but it goes here:
I build I'm doing bigger with AngularJS which will replace a huge Excel file with a large number of formulas and functions. In essence, this form is a calculator - where many values depend on the previous values. My current perspective is to add ng-change on all inputs that affect the next people - those who keep track of those areas that change the program, I find this method of being very hard to confuse and maintain. I am Any good pattern to do such a thing?
What I am building is 60+ fields that interact with each other. For example, all values calculated like "value" are subject to manual change or override. Therefore in the examples given below, the "total value" should be automatically calculated as whether the value is calculated by the previous values or changed manually.
Small example:
& lt; Div ng- application & gt; & Lt; H2 & gt; Calculator & lt; / H2 & gt; & Lt; Div ng-controller = "testctrl" & gt; & Lt; Form & gt; & Lt; Li & gt; Width (cm): & lt; Input type = "text" ng-change = "changeprice ()" ng-model = "width" /> & Lt; / Li & gt; & Lt; Li & gt; Height (cm): & lt; Input type = "text" ng-change = "change process ()" ng-model = "height" /> & Lt; / Li & gt; & Lt; Li & gt; Depth (cm) & lt; Input type = "text" ng-change = "change process ()" ng-model = "depth" /> & Lt; / Li & gt; & Lt; Li & gt; Price per cms 3 & lt; Input type = "text" ng-change = "changepris ()" ng-model = "pricemm" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; B & gt; Price & lt; / B & gt; & Lt; Input type = "article" ng-model = "value" /> & Lt; Br / & gt; & Lt; Br / & gt; & Lt; / Li & gt; & Lt; Li & gt; Packaging value & lt; Input type = "text" ng-change = "changeliptrus ()" ng-model = "package price" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; B & gt; Total value & lt; / B & gt; & Lt; Input type = "article" ng-model = "total" /> & Lt; / Li & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; / Div & gt; JS:
function TestCtrl ($ scope) {$ scope. $ Watch ('price', function (newValue, oldValue) {if (newValue! = Old value) {$ scope.changeTotalPrice ();}}); $ Scope.changePrice = function () {var width = 0; Var height = 0; Var depth = 0; Var Price CM = 0; Width = $ scope.width; Height = $ area.height; Depth = $ scope.depth; PriceCm = $ scope.priceCm; If (width> 0 & amp; amp; height> gt; 0 & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp ; Amp; amp; amp; amp; amp; amp;; gt; value & gt; CM & gt;) {$ scope.price = width * height * depth * priceCm; }} $ Scope.changeTotalPrice = function () {var price = 0; Var Packaging = 0; Value = $ area value; Packaging = $ scope.packagePrice; If (value> 0 & amp; amp; & amp; amp; Packaging & gt; 0) {$ scope.total = value * 1 + packaging * 1; }}} Sample:
Yes it is better to do so Method of doing: Calculate the total dynamically, depending on the rest of your total value
function TestCtrl ($ scope) {$ scope.price = function () {var width = $ Scope.width; Var height = $ scope.height; Var depth = $ scope.depth; Var Price CM = $ Scope.Price CM; If (width> 0 & amp; amp; amp; amp; height> gt; 0 & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; Amp; amp; amp; and & gt; value & amp; & nbsp; CM & gt; 0) {return width * height * depth * priceCm; }} $ Scope.totalPrice = function () {var price = $ scope.price (); Var Packaging = $ scope.packagePrice; If (Price & gt; 0 & amp; Packaging & gt; 0) {Return Price * 1 + Packaging * 1; }}} See Bella:
Comments
Post a Comment