Angularjs Input text value depends from another input text and viceversa

Question

I have an array of data that show in a table, that table is editable, and want the fields are dependent on each other.

How I can do that by changing the percentage of a cell, change the amount for that row and vice versa, when you change the amount, also change the percentage? always verifying not exceeding 100% of the sum of the percentages, and the sum of the amounts not exceeding the total amount.

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>

Basically its weirdo! but you can add ng-change event on input box, based on total value or % update other row value & %. As you need to do some calculation for other row based on whichever row you making changes. Update other row with equal value like((total value- change row)/(total number of rows-1)) Or you can make the random number generation and make sure its validate with total value and %, it will have lots of permutations & combinations so better use above metioned case. — Pravin Erande
– Pravin Erande, Commented Sep 29, 2016 at 6:10

Nishant123 · Accepted Answer · 2016-09-29 06:22:03Z

You can use ng-change for each input(just like @Pravin Erande said in comments).

I have made a SAMPLE FIDDLE for you(without any calculations)

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

You can create a function and pass the $index to that function and update the $scope.Data accordingly after calculation

Pravin Erande · Accepted Answer · 2016-09-29 06:36:38Z

Add ng-change event on bothinput box

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>

I haven't added negative cases like posting value greater than total value or for % more than 100

Mohit Tanwani · Accepted Answer · 2016-09-29 07:05:59Z

You can achieve it by calling a single function based on the flag.

See the working example.

  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>

pBlackmouth · Accepted Answer · 2016-09-29 18:41:52Z

Thank you all! I took a bit of everyone's comments, but I think it helped me with my problem was ng-change.

I leave an example of what I needed to do.

Regards!

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>

Danilo Cândido · Accepted Answer · 2017-12-27 13:40:34Z

0

Below is Logic for your need!.

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

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

edited Dec 27, 2017 at 13:40

Danilo Cândido

4081 gold badge5 silver badges18 bronze badges

answered Sep 29, 2016 at 6:59

Rajesh S

93 bronze badges

Collectives™ on Stack Overflow

Angularjs Input text value depends from another input text and viceversa

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related