Copy one column value to another when CheckBox checked in AngularJS

Last Reply one month ago By dharmendr

Posted 2 months ago

How to copy the data from one column to another column textbox when checkbox is clicked in ng-repeat data and also the selected checkbox values must be automatically summed and displayed.

When the checkbox is checked, the value must be copied to the next column which is having a textbox from one column and when the checkbox is unchecked, the value must disappear should not be copied. The checked checkbox textbox values should be added and displayed.

            <div class="col-md-4 mb-3">
                <span class="airways-name">Total : </span>
            </div>
            <div class="row m-1 p-1" ng-repeat="item in mydata">
                <div class="col-md-1 pull-left airways-info-sect">
                    <span class="fli-code">Serial No</span>
                    <span class="airways-name" style="text-align:center;">{{$index + 1}}</span>
                </div>
                <div class="col-md-4 pull-left airways-info-sect">
                    <span class="fli-code">Part Name</span>
                    <span class="airways-name" style="text-align: left;">{{item.PartName}}</span>
                </div>               
                <div class="col-md-1 pull-left airways-info-sect">
                    <span class="fli-code">Accept Qty</span>
                    <span class="airways-name" style="text-align:right;">{{item.Numbers | number}}</span>
                </div>
                <div class="col-md-1 pull-left airways-info-sect">
                    <span class="fli-code">Issued Qty</span>
                    <span class="airways-name" style="text-align:right;">{{item.IssuedQty | number}}</span>
                </div>               
                <div class="col-md-1 pull-right airways-info-sect">
                    <span class="fli-code" style="text-align:center">Amount($)</span>
                    <span class="airways-name" style="text-align:right;">{{item.CurrencyAmount | number}}</span>
                </div>
                <div class="col-md-1 pull-right airways-info-sect">
                    <span class="fli-code">Select</span>
                    <span class="airways-name" style="text-align:center"><input type="checkbox" class="" /></span>
                </div>
                <div class="col-md-3 pull-left airways-info-sect">
                    <span class="fli-code">Receipt Amount($)</span>
                    <input type="number" class="" placeholder="" ng-model="replica" ng-init="replica=0" required="" style="border: 1px solid #333; width: 90%; text-align: right" />
                </div>              
            </div>

 

    $scope.mydata = null;
    $scope.Search = function () {
        $http.get(apiUrl + "/api/Warehouse/GetCurrencyDetails?invoiceno=" + $scope.SelectedInvoice.originalObject.InvoiceNo + "")
        .then(function (response) {
            $scope.mydata = JSON.parse(response.data);
            //$scope.partName = $scope.mydata[0].PartName;
            //$scope.currency = $scope.mydata[0].CurrencyAmount;
            //$scope.acceptQty = $scope.mydata[0].Numbers;
            //$scope.issuedQty = $scope.mydata[0].IssuedQty;
        })
    }
Posted one month ago Modified on one month ago

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope) {
            $scope.Items = [{ PartName: 'Part 1', Numbers: 'No 1', IssuedQty: 10, CurrencyAmount: 12485.80 },
                            { PartName: 'Part 2', Numbers: 'No 2', IssuedQty: 5, CurrencyAmount: 485.59 },
                            { PartName: 'Part 3', Numbers: 'No 3', IssuedQty: 5, CurrencyAmount: 4578.16}];

            $scope.Copy = function (index) {
                if ($scope.Items[index].HasChecked) {
                    $scope.Items[index].replica = $scope.Items[index].CurrencyAmount;
                } else {
                    $scope.Items[index].replica = 0;
                }
                var total = 0;
                for (var i = 0; i < $scope.Items.length; i++) {
                    total += parseFloat($scope.Items[i].replica);
                }
                $scope.Total = total;
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="col-md-4 mb-3">
        <span class="airways-name">Total : <b>{{Total}}</b></span>
    </div>
    <div class="row m-1 p-1" ng-repeat="item in Items">
        <div class="col-md-1 pull-left airways-info-sect">
            <span class="fli-code">Serial No</span> <span class="airways-name" style="text-align: center;">
                {{$index + 1}}</span>
        </div>
        <div class="col-md-4 pull-left airways-info-sect">
            <span class="fli-code">Part Name</span> <span class="airways-name" style="text-align: left;">
                {{item.PartName}}</span>
        </div>
        <div class="col-md-1 pull-left airways-info-sect">
            <span class="fli-code">Accept Qty</span> <span class="airways-name" style="text-align: right;">
                {{item.Numbers | number}}</span>
        </div>
        <div class="col-md-1 pull-left airways-info-sect">
            <span class="fli-code">Issued Qty</span> <span class="airways-name" style="text-align: right;">
                {{item.IssuedQty | number}}</span>
        </div>
        <div class="col-md-1 pull-right airways-info-sect">
            <span class="fli-code" style="text-align: center">Amount($)</span> <span class="airways-name"
                style="text-align: right;">{{item.CurrencyAmount | number}}</span>
        </div>
        <div class="col-md-1 pull-right airways-info-sect">
            <span class="fli-code">Select</span> <span class="airways-name" style="text-align: center">
                <input type="checkbox" class="" ng-change="Copy($index)" ng-model="item.HasChecked" /></span>
        </div>
        <div class="col-md-3 pull-left airways-info-sect">
            <span class="fli-code">Receipt Amount($)</span>
            <input type="number" class="" placeholder="" ng-model="item.replica" ng-init="item.replica=0"
                style="border: 1px solid #333; width: 90%; text-align: right" />
        </div>
        <hr />
    </div>
</body>
</html>

Demo