AngularJS - 多结合 - 计算输入值

Question

不知道如何正确地提出问题，但这里有云：

我要建大形式AngularJS将取代庞大的Excel中有很多公式的文件和功能。简而言之，这种形式就是计算器 - 许多值取决于以前的值。我目前的做法是在影响下一个输入的所有输入上添加ng-change，也将监视器添加到可编程更改的那些字段中。我觉得这种做法很混乱，很难维护。做这种工作有什么更好的模式？

我正在构建的完整表单由60个以上的相互作用的字段组成。所有计算值（如示例中的“价格”）都需要手动更改或覆盖。所以下面例子中的“总价格”的计算应该是自动的，无论价格是通过以前的价格计算还是手动更改。

小例子：

<div ng-app> 
    <h2>Calculator</h2> 

    <div ng-controller="TestCtrl"> 
    <form> 
     <li>Width (cm): <input type="text" ng-change="changePrice()" ng-model="width"/> </li> 
     <li>Height (cm): <input type="text" ng-change="changePrice()" ng-model="height"/> </li> 
     <li>Depth (cm)<input type="text" ng-change="changePrice()" ng-model="depth"/> </li> 
     <li>Price per cm3<input type="text" ng-change="changePrice()" ng-model="priceCm"/> </li> 
     <li><b>Price</b><input type="text" ng-model="price"/> <br/><br/></li> 
     <li>Packaging price<input type="text" ng-change="changeTotalPrice()" ng-model="packagePrice"/> </li> 
     <li><b>Total price</b><input type="text" ng-model="total"/> </li> 
    </form> 
    </div> 
</div> 

JS：

function TestCtrl($scope) { 
    $scope.$watch('price', function(newValue,oldValue){ 
    if(newValue != oldValue) 
    { 
     $scope.changeTotalPrice(); 
    } 
}); 

$scope.changePrice = function(){ 
    var width = 0; 
    var height = 0; 
    var depth = 0; 
    var priceCm = 0; 

    width = $scope.width; 
    height = $scope.height; 
    depth = $scope.depth; 
    priceCm = $scope.priceCm; 

    if(width > 0 && height > 0 && depth > 0 && priceCm > 0) 
    { 
     $scope.price = width * height * depth * priceCm; 
    }   
} 

$scope.changeTotalPrice = function(){ 
    var price = 0; 
    var packaging = 0; 

    price = $scope.price; 
    packaging = $scope.packagePrice; 

    if(price > 0 && packaging > 0) 
    { 
     $scope.total = price*1 + packaging*1; 
    }   
    } 
} 

样品：http://jsfiddle.net/rewnao6p/3/

Answer 1

是的，这是一个更好的方式来做到这一点：因为你总依赖于值的其余部分，动态计算总数

function TestCtrl($scope) { 

$scope.price = function(){ 
    var width = $scope.width; 
    var height = $scope.height; 
    var depth = $scope.depth; 
    var priceCm = $scope.priceCm; 

    if(width > 0 && height > 0 && depth > 0 && priceCm > 0) 
    { 
     return width * height * depth * priceCm; 
    }   
} 

$scope.totalPrice = function(){   
    var price = $scope.price(); 
    var packaging = $scope.packagePrice; 

    if(price > 0 && packaging > 0) 
    { 
     return price*1 + packaging*1; 
    }   
} 

} 

看小提琴：http://jsfiddle.net/g7p7ho6z/