Is there a way for me to do a nested ng-repeat call, but not having it create a nested structure.
I.e.
Say I have this in my script:
$scope.animals = {
dog : {
rupert: {
size: 'big'
}
},
cat : {
jon: {
size: 'small'
},
don: {
size: 'small'
}
},
pig : {
mike: {
size: 'big'
}
}
}
and this in my html
<ul>
<ul ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ul>
</ul>
Here is a plunkr : http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview
Basically at the moment this creates something like this:
<ul>
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
</ul>
I'd like it to make something like this:
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
So is there a way to formulate this to get this result, do something of this sort (this doesn't work lol)
<ul>
<ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ng-repeat>
</ul>
*note I'd like to avoid doing this
<ul>
<li ng-repeat="(name,description) in animals.dog">
<span>
This is {{name}} the dog, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.cat">
<span>
This is {{name}} the cat, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.pig">
<span>
This is {{name}} the pig, he is really {{description.size}}.
</span>
</li>
</ul>