javascript - Angularjs 同步输入百分比

Question

我需要有 x 个文本输入字段。

每个输入字段将以与其余字段相同的值开始。该值为100/输入数量。

我需要同步输入字段，因此当一个值发生更改时，其余值将重新计算为 100。

这个问题看起来解决起来相当复杂，但我确信以前肯定有人做过，看起来可能很常见。

我没有糟糕地解释这个问题，这里有一个它工作的例子。它不使用文本字段，而是使用 slider 。但解决方案是一样的。

https://www.humblebundle.com/weekly

点击选择您的资金去向

jsFiddle 例如:http://jsfiddle.net/r4qbx9Lb/5/

Answer 1

首先，您的 Controller 中需要一个 $watch，因为您希望所有输入值都根据其中任何一个的更改而更改。在您的 $watch 回调函数中，您需要找出用户更改了哪个数组索引(什么输入)。

所有这些看起来都像下面这样:

  // 100 in this example, but can be whatever
  $scope.totalValue = 100;

  $scope.$watch('inputs', function(newValue, oldValue){
       for(var i = 0; i < newValue.length; i++){
         if(newValue[i].value != oldValue[i].value){
             $scope.changedIndex = i;
             $scope.leftOverValue = $scope.totalValue - newValue[i].value;
             $scope.percentChange = (newValue[i].value - oldValue[i].value) / oldValue[i].value;
             console.log($scope.leftOverValue);
             console.log(percentChange);
         }
     }
  }, true);

获得此信息后，您可以将其应用于用户未更改的所有数组值。因此，运行另一个循环(您需要拆分两个循环，因为您不知道更改的值最初是什么索引)并更改此循环中的任何不受影响的索引值:

 for(var x = 0; x < newValue.length; x++){
       if($scope.changedIndex != x){
           //Do math and apply logic
       }
 }

然后您可以应用任何您想要调整其他值的数学公式。您必须弄清楚这一部分 - 取决于您是否希望其他值与其旧值成比例地更改，或者与用户对其编辑的输入所做的更改成比例地更改。

http://jsfiddle.net/r4qbx9Lb/10/