Angularjs Angular JS:ng在没有嵌套结构的情况下重复多次
有没有一种方法可以让我执行嵌套的ng repeat调用,但不让它创建嵌套结构 即 假设我的脚本中有以下内容:Angularjs Angular JS:ng在没有嵌套结构的情况下重复多次,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,有没有一种方法可以让我执行嵌套的ng repeat调用,但不让它创建嵌套结构 即 假设我的脚本中有以下内容: $scope.animals = { dog : { rupert: { size: 'big' } }, cat : { jon: { size: 'small' }, don: { size: 'small'
$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>
-
这是{{name}}{{type}},他真的是{{description.size}。
下面是一个例子:
基本上目前这创造了这样的东西:
<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>
<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>
-
这是猫唐,他真的很小。
-
这是猫乔恩,他真的很小。
-
这是狗鲁伯特,他真的很大。
-
这是猪迈克,他真的很大。
那么有没有一种方法来表达这个结果,做一些类似的事情(这不管用lol)
-
这是{{name}}{{type}},他真的是{{description.size}。
*注意我希望避免这样做
<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>
-
这是{{name}那条狗,它真的是{{{description.size}。
-
这是{{name}猫,他真的是{{{description.size}。
-
这是{{name}猪,他真的是{{{description.size}。
您可能可以为顶级中继器创建两个伪指令
<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>
-
这是{{name}}{{type}},他真的是{{description.size}。