CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Douglas
Douglas

Reputation: 53

Angularjs ng-repeat over array of array of objects

I am trying to use ng-repeat over this array of array of objects, but I am unable to get to display the correct name-value pairs.

var names = [
[{name: "Name 1", age: 25}, {name: "Name 2", age: 20}],
[{name: "Name 3", age: 50}, {name: "Name 4", age: 40}],
[{name: "Name 5", age: 20}, {name: "Name 6", age: 40}]
];

This works to display the entire array of array of objects:

<p ng-repeat="name in names"></p>

But the following to display the name doesn't:

<p ng-repeat="name in names">
    <p ng-repeat="n in name">
        {{n.name}}
    </p>
</p>

I know I am for sure missing something simple.

Upvotes: 1

Views: 90

Answers (2)

Phuong Nguyen
Phuong Nguyen

Reputation: 3090

Seem like nested p tag causes ng-repeat messes up beginning/ending tag

If you change the inside p tag to span or div, it works:

<p ng-repeat="name in names">        
    <span ng-repeat="n in name">
        {{n.name}}
    </span>
</p>

Upvotes: 1

Ralf de Kleine
Ralf de Kleine

Reputation: 11756

If you can change your multi array to use a array of objects with an array of items like below:

var names = [
{items:[{name: "Name 1", age: 25}, {name: "Name 2", age: 20}]},
{items:[{name: "Name 3", age: 50}, {name: "Name 4", age: 40}]},
{items:[{name: "Name 5", age: 20}, {name: "Name 6", age: 40}]}
];

<p ng-repeat="name in names">
    <p ng-repeat="n in name.items">
        {{n.name}}
    </p>
</p>

Upvotes: 0

Related Questions