Duplicating table fails in angularJS

Question

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

@NitishKumar I am trying to add my current table body again to bottom and add its data to my 'palletElement', I need to do some calculations aso before duplicating the tbody. Tha I guess I can do once I am through with this — None
– None, Commented Oct 9, 2014 at 6:50
Yes, That does exactly what I want, please ad it as an answer,and if you could please explain how I could manipulate the data inside 'palletElement' out there. — None
– None, Commented Oct 9, 2014 at 6:55

Nitish Kumar · Accepted Answer · 2014-10-09 06:57:59Z

1

Just Change $scope.newPalletItem function To:

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

SEE DEMO

answered Oct 9, 2014 at 6:57

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Duplicating table fails in angularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related