Angularjs Synced inputs for percetange

我需要有x文本輸入字段的數量。Angularjs Synced inputs for percetange

每個輸入字段將以與其餘值相同的值開始。該值爲100/Number of inputs。

我需要同步的輸入字段，所以當一個值發生改變時，其餘值重新計算爲等於100

這個問題似乎相當複雜的解決，但我敢肯定它必須之前已經完成，似乎可能相當普遍。

而不是我嚴重解釋問題，這是它的工作的一個例子。它不使用文本字段，而是使用滑塊。但解決方案是一樣的。

https://www.humblebundle.com/weekly

點擊Choose where your money goes

的jsfiddle例如：http://jsfiddle.net/r4qbx9Lb/5/

來源

2015-12-21 CharliePrynn

相關[對於類似的問題UX問題]（https://ux.stackexchange.com/questions/82466/cumulative-percentage-between-4-controls） – ryanyuyu

是有必要的是所有的總和輸入字段爲100？ –

該數字不一定必須是100，但它總是需要相同。 – CharliePrynn

首先，你需要在你的控制器$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/

來源

2015-12-21 15:42:23

Angularjs Synced inputs for percetange

回答

相關問題