1. 首頁
  2. 問答
  3. Angularjs輸入文本值取決於從另一個輸入文本，反之亦然

Angularjs輸入文本值取決於從另一個輸入文本，反之亦然

2016-09-29 136 views
0

我有數據的陣列，顯示在一個表中，該表是可編輯的，並希望這些字段是彼此依賴。Angularjs輸入文本值取決於從另一個輸入文本，反之亦然

我如何能做到這一點通過改變細胞的百分比，更改該行，反之亦然量，當你改變的量，也改變百分比是多少？總是驗證不超過百分比總數的100％，以及總額不超過總額。

angular 
 
.module("app", []) 
 
.controller("appController", function ($scope) { 
 

 
    $scope.Data = [ 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    } 
 
    ]; 
 
    $scope.TotalAmount = 4000.0; 
 
});
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> 
 

 
</head> 
 
<body ng-app="app"> 
 

 
    <div class="container" ng-controller="appController"> 
 
     Total amount: {{TotalAmount}} 
 
     <table class="table table-striped"> 
 
      <tr><th>Percent</th><th>Value</th></tr> 
 
      <tr ng-repeat="invoice in Data"> 
 
       <td><input type="number" ng-model="invoice.Percent" /></td> 
 
       <td><input type="number" ng-model="invoice.Value" /></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2016-09-29 pBlackmouth

+0

基本上它的怪人！但您可以在輸入框中添加ng-change事件，基於總值或％更新其他行值＆％。因爲您需要根據您進行更改的行對其他行進行計算。 更新其他行等價值像（（總價值變化行）/（總行數-1）） 或者你可以使隨機數的生成，並確保其與總值和％驗證，它會有很多排列和組合，所以更好地使用以上提到的情況。 –

回答

2

可以使用ng-change每個input（就像@Pravin Erande在評論中說的）。

我已經爲你SAMPLE FIDDLE（沒有任何計算）

<tr ng-repeat="invoice in Data"> 
       <td><input type="number" ng-model="invoice.Percent" ng-change="valueChanged($index,invoice.Percent,invoice.Value)" /></td> 
       <td><input type="number" ng-model="invoice.Value" ng-change="valueChanged($index,invoice.Percent,invoice.Value)" /></td> 
      </tr> 



$scope.valueChanged= function(index,precent,value) 
    { 
    console.log("Index changed "+index+" percent "+precent+" value "+value); 
    $scope.Data[index].Percent = 50; // Assign after calculation 
$scope.Data[index].Value = 2000; // Assign after calculation 
    }

您可以創建一個函數並傳遞$index針對該功能計算

來源

2016-09-29 06:22:03 Nishant123

0

添加NG-變化後更新相應的$scope.Data事件在bothinput箱

angular 
 
.module("app", []) 
 
.controller("appController", function ($scope) { 
 

 
    $scope.Data = [ 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    } 
 
    ]; 
 
    $scope.TotalAmount = 4000.0; 
 
    $scope.percentChange=function(index,percent){ 
 
    var remainpercent=(100-percent)/($scope.Data.length-1); 
 
    var changerowvalue =$scope.TotalAmount*(percent/100); 
 
    $scope.Data[index].Value=changerowvalue; 
 
    var remainValue=($scope.TotalAmount-changerowvalue)/($scope.Data.length-1); 
 
    for(var i=0;i<$scope.Data.length;i++){ 
 
     if(i!==index){ 
 
      $scope.Data[i].Percent=remainpercent; 
 
      $scope.Data[i].Value=remainValue; 
 
     } 
 
    } 
 
    }; 
 
    $scope.valueChange=function(index,value){ 
 
    $scope.Data[index].Percent=(value*100/$scope.TotalAmount); 
 
    var remainValue=($scope.TotalAmount-value)/($scope.Data.length-1); 
 
    var remainpercent=(100-$scope.Data[index].Percent)/($scope.Data.length-1);   
 
    for(var i=0;i<$scope.Data.length;i++){ 
 
     if(i!==index){ 
 
      $scope.Data[i].Percent=remainpercent; 
 
      $scope.Data[i].Value=remainpercent; 
 
     } 
 
    } 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> 
 

 
</head> 
 
<body ng-app="app"> 
 

 
    <div class="container" ng-controller="appController"> 
 
     Total amount: {{TotalAmount}} 
 
     <table class="table table-striped"> 
 
      <tr><th>Percent</th><th>Value</th></tr> 
 
      <tr ng-repeat="invoice in Data"> 
 
       <td><input type="number" ng-change="percentChange($index,invoice.Percent)" ng-model="invoice.Percent" /></td> 
 
       <td><input type="number" ng-change="valueChange($index,invoice.Percent)" ng-model="invoice.Value" /></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 

 
</body> 
 
</html>

我還沒有加入的排除情況下，像張貼值大於總價值或％超過100

來源

2016-09-29 06:36:38

0

下面是邏輯您的需求！

$scope.Data[index].Percent = value/$scope.TotalAmount * 100; 

$scope.Data[index].Value = precent/100 * $scope.TotalAmount;

來源

2016-09-29 06:59:52

0

您可以通過調用基於該標誌的單個函數來實現它。

查看工作示例。

angular 
 
.module("app", []) 
 
.controller("appController", function ($scope) { 
 

 
    $scope.Data = [ 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    }, 
 
    { 
 
     Percent: 25.0, 
 
     Value: 1000.0 
 
    } 
 
    ]; 
 
    $scope.TotalAmount = 4000.0; 
 
    
 
    $scope.changeCalled = function(invoice, flag, index){ 
 
    var per=0; 
 
    var value=0; 
 
    if(flag == 'per') 
 
    { 
 
     value = ($scope.TotalAmount * invoice.Percent)/100; 
 
     $scope.Data[index].Value = value; 
 
    } 
 
    else if(flag == 'val') 
 
    { 
 
     per = (invoice.Value * 100)/$scope.TotalAmount; 
 
     $scope.Data[index].Percent = per; 
 
    } 
 
    $scope.updateResult(index); 
 
    } 
 
    $scope.updateResult = function(index, flag){ 
 
    var remainedPer = 0; 
 
    var remainedVal = 0; 
 
    remainedPer = (100 - $scope.Data[index].Percent)/ ($scope.Data.length - 1);    
 
    remainedInput = ($scope.TotalAmount - $scope.Data[index].Value)/ ($scope.Data.length - 1); 
 
    for(i=0; i<$scope.Data.length; i++) 
 
    { 
 
     if(i != index) 
 
     { 
 
      $scope.Data[i].Percent = remainedPer; 
 
      $scope.Data[i].Value = remainedInput; 
 
     } 
 
    } 
 
    }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app"> 
 

 
    <div class="container" ng-controller="appController"> 
 
     Total amount: {{TotalAmount}} 
 
     <table class="table table-striped"> 
 
      <tr><th>Percent</th><th>Value</th></tr> 
 
      <tr ng-repeat="invoice in Data"> 
 
       <td><input type="number" ng-model="invoice.Percent" ng-change="changeCalled(invoice, 'per', $index)"/></td> 
 
       <td><input type="number" ng-model="invoice.Value" ng-change="changeCalled(invoice, 'val' ,$index)" /></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 

 
</body>

來源

2016-09-29 07:05:59

0

謝謝大家！ 我收集了大家的意見，但我認爲它幫助我解決了我的問題。

我留下了一個我需要做的例子。

問候！

angular 
 
      .module("app", []) 
 
      .controller("appController", function ($scope, $filter) { 
 

 
       $scope.Data = [ 
 
        { 
 
         Percent: 25.0, 
 
         Value: 1000.0 
 
        }, 
 
        { 
 
         Percent: 25.0, 
 
         Value: 1000.0 
 
        }, 
 
        { 
 
         Percent: 25.0, 
 
         Value: 1000.0 
 
        }, 
 
        { 
 
         Percent: 25.0, 
 
         Value: 1000.0 
 
        } 
 
       ]; 
 
       $scope.TotalAmount = 4000.0; 
 

 
       $scope.ValueChanged = function (invoice) { 
 
        invoice.Value = (invoice.Value == null || invoice.Value.toString() == ".") ? 0 : invoice.Value; 
 
        invoice.Percent = (invoice.Value * 100.0)/$scope.TotalAmount; 
 
        CalculateTotals(); 
 
        ValidateValues(); 
 
       } 
 

 
       $scope.PercentChanged = function (invoice) { 
 
        invoice.Percent = (invoice.Percent == null || invoice.Percent.toString() == ".") ? 0 : invoice.Percent; 
 
        invoice.Value = $scope.TotalAmount * (invoice.Percent/100.0); 
 
        CalculateTotals(); 
 
        ValidateValues(); 
 
       } 
 

 
       function CalculateTotals() { 
 
        var sumPercent = 0; 
 
        var sumAmount = 0; 
 
        angular.forEach($scope.Data, function (item, index) { 
 
         sumPercent += item.Percent; 
 
         sumAmount += item.Value; 
 
        }); 
 
        $scope.CalculatedPercent = sumPercent; 
 
        $scope.CalculatedAmount = sumAmount; 
 
       } 
 

 
       function ValidateValues() { 
 
        IsValidAmount(); 
 
        IsValidPercent(); 
 
       } 
 

 
       function IsValidPercent() { 
 
        if ($scope.CalculatedPercent == 100.0) { 
 
         $scope.IsValidPercent = true; 
 
         $scope.formInvoices.hdCalculatedPercent.$setValidity('valid', true); 
 
        } else { 
 
         $scope.IsValidPercent = false; 
 
         $scope.formInvoices.hdCalculatedPercent.$setValidity('valid', false); 
 
        } 
 
       } 
 

 
       function IsValidAmount() { 
 
        if ($scope.CalculatedAmount == $scope.TotalAmount) { 
 
         $scope.IsValidAmount = true; 
 
         $scope.formInvoices.hdCalculatedAmount.$setValidity('valid', true); 
 
        } else { 
 
         $scope.IsValidAmount = false; 
 
         $scope.formInvoices.hdCalculatedAmount.$setValidity('valid', false); 
 
        } 
 
       } 
 

 
       $scope.CalculatedPercent = 100.0; 
 
       $scope.CalculatedAmount = $scope.TotalAmount; 
 

 
       $scope.IsValidPercent = true; 
 
       $scope.IsValidAmount = true; 
 
      })
.invalidValue{ 
 
      color: red; 
 
      font-weight: bold; 
 
     } 
 
     .validValue{ 
 
      color: black; 
 
     } 
 
     .tableWidth{ 
 
      width: 500px; 
 
     }
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
    
 
</head> 
 
<body ng-app="app"> 
 

 
    <div class="container" ng-controller="appController"> 
 
     <form role="form" name="formInvoices"> 
 
      <table class="table table-condensed table-bordered tableWidth"> 
 
       <tr> 
 
        <td class="col-xs-12"><b>Total amount: </b>{{TotalAmount | currency}}</td> 
 
       </tr> 
 
      </table> 
 
      <table class="table table-striped table-condensed table-bordered tableWidth"> 
 
       <tr> 
 
        <th>Percent</th> 
 
        <th>Amount</th> 
 
       </tr> 
 
       <tr ng-repeat="invoice in Data"> 
 
        <td><input type="number" ng-model="invoice.Percent" ng-change="PercentChanged(invoice)" /> %</td> 
 
        <td>$ <input type="number" ng-model="invoice.Value" ng-change="ValueChanged(invoice)" /></td> 
 
       </tr> 
 
      </table> 
 
      <table class="table table-striped table-condensed table-bordered tableWidth"> 
 
       <tr> 
 
        <td class="col-xs-6" ng-class="{'invalidValue': !IsValidPercent,'validValue': IsValidPercent}">{{CalculatedPercent}} %<input name="hdCalculatedPercent" type="hidden" ng-model="CalculatedPercent" /></td> 
 
        <td class="col-xs-6" ng-class="{'invalidValue': !IsValidAmount,'validValue': IsValidAmount}">{{CalculatedAmount | currency}}<input name="hdCalculatedAmount" type="hidden" ng-model="CalculatedAmount" /></td> 
 
       </tr> 
 
      </table> 
 
      <input type="submit" ng-disabled="formInvoices.$invalid" value="Save" /> 
 
     </form> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2016-09-29 18:41:52 pBlackmouth

相關問題

 相關問題