如何始终保持动态生成的输入框的值之和等于AngularJS中的特定结果？

Question

我正在生成一组动态输入框，我希望始终保持值的总和等于特定结果。因此，当我更改输入框的任何值时，其他值应该以保持总和不变的方式更改。我该如何使用AngularJS？

下面是我的div

<div data-ng-repeat="item in SecurityAllocationList track by $index">
    <input type="number" data-ng-model="item.InvestAmount" />
</div>

我想实现这个

Answer 1

你需要一个函数来计算当一个变化时以及可能在页面加载时的数量，如下所示：

  $scope.recalc = function(item) {

    var itemCount = $scope.SecurityAllocationList.length;
    var denominator = itemCount;

    var numerator = $scope.totalAmt;
    if (item) {
      numerator = $scope.totalAmt - item.InvestAmount;
      denominator -= 1;
    }
   var remaining = numerator / denominator;
   angular.forEach($scope.SecurityAllocationList, function(inv) {
      if (inv !== item) {
       inv.InvestAmount = remaining;
     }
    });
  };

这将从输入元素上的 ng-change 指令调用，如下所示：

<input type="number" data-ng-model="item.InvestAmount" ng-change="recalc(item)"/>

我创建了一个 plunker here 来说明。