Copy one column value to another when CheckBox checked in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Sep 19, 2019 01:51 AM
Forum: AngularJS
Answer: 1
Views: 4306
Sample Code: Download

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

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Sep 19, 2019 08:37 AM
Modified: on Sep 20, 2019 12:32 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Copy one column value to another when CheckBox checked in AngularJS

Company

Explore

Follow us

Contact Us