Javascript AngularJS-多个绑定-计算输入值

我正在用AngularJS构建一个大型表单，它将用大量公式和函数替换一个巨大的excel电子表格。简而言之，此表单是一个计算器，其中许多值取决于以前的值。我目前的方法是在影响下一个输入的所有输入上添加ng更改，同时在那些以编程方式更改的字段中添加观察者。我发现这种方法非常混乱，很难维护。做那种工作有更好的模式吗

我正在构建的完整表单由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>

---

示例：

是的，这是一种更好的方法：因为总数取决于值的其余部分，所以动态计算总数

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;
    }          
 }

}

---

请看小提琴：

是的，这是一种更好的方法：因为您的总数取决于值的其余部分，所以动态计算总数

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;
    }          
 }

}

---

查看小提琴：

不要只链接到小提琴。在这方面，当你试图仅用一个小提琴链接提交答案时得到的警告应该足够清楚。请发布一个复制问题的代码示例。@Cerbrus谢谢，我已经修复了它。不要只是链接到小提琴。在这方面，当你试图仅用一个小提琴链接提交答案时得到的警告应该足够清楚。请发布一个复制问题的代码示例。@Cerbrus谢谢，我已经修复了它。我尝试了这种方法，但无法手动更改/覆盖价格，计算无法继续。这是另一个问题，如果您在问题中详细说明，我们可能能够帮助您。这是对当前问题的回答。我尝试了这种方式，但我无法手动更改/覆盖价格，计算无法继续。这是另一个问题，如果您在问题中详细说明，我们可能会帮助您。这是对当前问题的回答