Nested ng-Repeat not working angularJS

Question

My code is like this

<table ng-app='myApp'>
    <thead>

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

                <td>
                    {{data.itemId}}
                </td>
                <td>
                    {{data.shipmentId}}
                </td>
                <td>
                    {{data.itemCode}}
                <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="prdElement.quantity" placeholder="Code" required />
                </td>

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

        </tbody>

    </table>


(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'
        }]
        }]

    }
    });
}());

All looks okay to me, but not working, can any one point out what I am doing wrong?

Fiddle

If i am not wrong, you are doing a <tr> inside a <tr> . You might have misplaced the tags — Nagaraj Tantri
– Nagaraj Tantri, Commented Oct 9, 2014 at 5:35
@Athul How about fixed those syntax errors in your fiddle first? — ivan.sim
– ivan.sim, Commented Oct 9, 2014 at 5:55

Nitish Kumar · Accepted Answer · 2014-10-09 06:29:24Z

2

Remove ng-controller="MainCtrl" from tbody and add it on table

Change prdElement.data To prdElement.Data and Try

See DEMO

answered Oct 9, 2014 at 6:29

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

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

2 Comments

ivan.sim Over a year ago

The ng-controller can remain in the tbody. OP just needs to fix up the javascript syntax error. Also, those nested <tr> elements are malformed.

MrBoJangles Over a year ago

My own experience with attempting to nest <tr> tags with nested repeaters resulted in the repeater just kind of giving up. No console errors, just the repeater refusing to work. I'm assuming angular has some kind of syntax checking or some such in repeaters, not sure. The solution was to use nested <ul> tags, which is valid and totally fine to do and the repeater doesn't have a problem with those.

Collectives™ on Stack Overflow

Nested ng-Repeat not working angularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related