AngularJS Ng-repeat with array

Question

I have table and trying to render out table rows using the ng-repeat.

The situation is that I have a invoice which may or may not have multiple invoice details attached. The data is returned in an object and one of those properties is an array. So, I created my table and used ng-repeat using the array as the model. In a way it works because three table rows are render out but the description remains field blank.

Thanks

I looked here

HTML:

<tbody>
    <tr style="cursor:pointer" ng-repeat="details in vm.orders.componetGrid ">                    
        <td ng-bind="details.componetGrid.componentDescription"></td>
    </tr>
</tbody>

JS

function loadOrder(invoiceNumber) {
    return orderService.getOrderById(invoiceNumber)
        .then(function (result) {
            vm.orders = result.data;                
        }, function (err) {
            console.log("error returned");
        });
}

sample of the data

if you don't transform your data in between, details.componetGrid.componentDescription should be details.componentDescription — Mateusz Sip
– Mateusz Sip, Commented Jun 22, 2016 at 2:26
You are already referencing vm.orders.componetGridas your ng-repeat array, you should use details.componentDescription in the iteration. I suggest that you correct the misspelled componetGrid, to componentGrid — Bon Macalindong
– Bon Macalindong, Commented Jun 22, 2016 at 3:56

Prabhjot Singh Rai · Accepted Answer · 2016-06-22 02:30:46Z

1

Your reference to componentDescription is wrong. This should work:

<tbody>
    <tr style="cursor:pointer" ng-repeat="details in vm.orders.componetGrid ">                    
        <td ng-bind="details.componentDescription"></td>
    </tr>
</tbody>

answered Jun 22, 2016 at 2:30

Prabhjot Singh Rai

2,6355 gold badges38 silver badges63 bronze badges

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

Comments

kazenorin · Accepted Answer · 2016-06-22 02:27:00Z

1

details is binded as each member of the componetGrid, so

                <td ng-bind="details.componetGrid.componentDescription"></td>

should be

                <td ng-bind="details.componentDescription"></td>

instead

answered Jun 22, 2016 at 2:27

kazenorin

1,4758 silver badges16 bronze badges

1 Comment

Troy Bryant Over a year ago

I swore at one point I did have that. Developing this in edge and doesnt always clear the cache but soon as I typed this back in worked.

Rohit Shedage · Accepted Answer · 2016-06-22 02:31:43Z

1

From the data you have provided in snippet it looks like componentgrid is a array.

Now in ng-repeat details in vm.orders.componetGrid means details is a componentgrid object.

So you should not say details.componentgrid.componentDescription

instead it should be details.componentDescription

answered Jun 22, 2016 at 2:31

Rohit Shedage

26.2k2 gold badges17 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS Ng-repeat with array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related