Angular-JS: ng-повторити кілька разів без вкладеної структури - angularjs, angularjs-directive, angularjs-ng-repeat

Чи є у мене спосіб зробити вкладений виклик ng-repeat, але не маючи його створення вкладеної структури.

І.е.

Скажімо, у моєму сценарії є таке:

$scope.animals = {
dog : {
rupert: {
size: "big"
}
},
cat : {
jon: {
size: "small"
},
don: {
size: "small"
}
},
pig : {
mike: {
size: "big"
}
}
}

і це в моєму 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>

Ось додатковий файл: http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview

В основному на даний момент це створює щось подібне:

<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>

Мені б подобалося робити щось подібне:

<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>

Тож чи є спосіб сформулювати це, щоб отримати такий результат, зробити щось подібне (це не працює, хаха)

<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>

* Примітка. Я хотів би уникати цього

<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>

Відповіді:

3 для відповіді № 1

Можливо, ви могли б створити пару манекенів ng-repeat-start / ng-repeat-end директиви для репітера верхнього рівня.

 <ul>
<!-- Remove it with an ng-if -->
<li ng-repeat-start="(type,animal) in animals" ng-if="0"></li>

<!-- Or do -->
<!-- <li ng-repeat-start="(type,animal) in animals" ng-if="::type<0"></li> -->

<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>

<!-- Remove it with an ng-if -->
<li ng-repeat-end  ng-if="0"></li>

<!-- Or do -->
<!-- <li ng-repeat-end  ng-if="::type<0"></li> -->
</ul>

Плнрр

---