CODEWITHSUNDEEP
javascriptangularjs
None
None

Reputation: 5670

Duplicating table fails in angularJS

My code is like this

<body>
<div>
    <table ng-app='myApp' ng-controller="MainCtrl">
        <thead>

        </thead>
        <tbody ng-repeat="prdElement in palletElement">
            <tr><td>{{prdElement.name}}</td></tr>

            <tr ng-repeat="data in prdElement.Data">

                <td>
                    {{data.itemId}}
                </td>
                <td>
                    {{data.shipmentId}}
                </td>
                <td>
                    {{data.itemCode}}
                </td>
                <td>
                    {{data.description}}
                </td>

                <td>
                    {{data.handlingUnit}}
                </td>
                <td>
                    {{data.weight}}
                </td>
                <td>
                    {{data.class}}
                </td>
                <td>
                    {{data.lenght}}
                </td>

                <td>
                    {{data.width}}
                </td>
                <td>
                    {{data.height}}
                </td>
                <td>
                    {{data.flag}}
                </td>

                <td>
                    <input type="text" ng-model="data.quantity" placeholder=" Code" required />

                </td>

            </tr>
            <tr>
                <td>

                    <button ng-click="newPalletItem( prdElement,$event)">Submit</button>

                </td>
            </tr>


        </tbody>

    </table>
</div>


   (function () {
    angular.module('myApp', []).controller('MainCtrl', function ($scope) {

        var counter = 0;

        $scope.palletElement =
            [{
                name: 'Pallet 1',
                Data:[{
                name:'item 1' ,
                itemId: '284307',
                shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
                itemCode: '',
                description: 'Bicycle parts - frame',
                quantity: '31',
                handlingUnit: 'CTN',
                weight: '613.04',
                class:'',
                lenght: '102',
                width: '42',
                height: '61',
                flag:'P'

            }, {
                name: 'item 2',
                itemId: '284308',
                shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
                itemCode: '',
                description: 'Bicycle parts - fork',
                quantity: '22',
                handlingUnit: 'CTN',
                weight: '242.99',
                class: '',
                lenght: '75',
                width: '34',
                height: '18',
                flag: 'P'
            }]
            }]



        $scope.newPalletItem = function (palletElement, $event) {
            counter++;

            angular.forEach(palletElement, function (value, key) {

                palletElement.push(palletElement);


            });


        }

    });
}());

on the last button click I am trying to duplicate entire tbody, but its not working. does any one have any idea?

Fiddle

Upvotes: 0

Views: 23

Answers (1)

Nitish Kumar
Nitish Kumar

Reputation: 4870

Just Change $scope.newPalletItem function To: 

  $scope.newPalletItem = function (palletElement, $event) {
        counter++;
        $scope.palletElement.push(palletElement);
  }

SEE DEMO

Upvotes: 1

Related Questions