[英]AngularJS nested ngRepeat on same element
Is there a way to perform nested loops in an AngularJS view without creating hidden dummy elements? 有没有办法在AngularJS视图中执行嵌套循环而不创建隐藏的虚拟元素?
Something like this: 像这样的东西:
<ul>
<li ng-repeat="gem in activeHero.gems"
ng-repeat="(key, value) in gem.attributes"
ng-repeat="attr in value">
{{attr.text}}
</li>
</ul>
or this 或这个
<ul>
<li ng-repeat-start="gem in activeHero.gems"
ng-repeat-start="(key, value) in gem.attributes"
ng-repeat="attr in value">
{{attr.text}}
</li ng-repeat-end
ng-repeat-end>
</ul>
Neither of these is possible AFAIK. 这些都不可能是AFAIK。
I basically want my HTML to have a different structure than the JSON it's based on. 我基本上希望我的HTML具有与它所基于的JSON不同的结构。 How could I achive this? 我怎么能得到这个? Is there a way to create loops inside a view without an HTML element? 有没有办法在没有HTML元素的视图中创建循环?
The examples above would loop over a JSON structure like this: 上面的例子将循环遍历JSON结构,如下所示:
JSON (stripped out a lot for clarity) JSON (为了清晰起见而被剥离了很多)
"activeHero" = {
"gems" : [ {
"attributes" : {
"primary" : [ {
"text" : "+220 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
}, {
"attributes" : {
"primary" : [ {
"text" : "+220 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
}, {
"attributes" : {
"primary" : [ {
"text" : "+160 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
} ]
}
(This is an actual JSON response from the Blizzard API for the video game "Diablo 3") (这是暴雪API对视频游戏“暗黑破坏神3”的实际JSON响应)
Try format your json before render; 尝试在渲染之前格式化你的json;
$scope.formattedData = [];
angular.forEach(activeHero.gems, function(value, key){
var item = {
//set filed you want
}
angular.forEach(value.atrtibutes, function(value2, key2){
item['propyouwant'] = value2[propyouwant]
angular.forEach(value2.primary, function(value3, key3){
item['propyouwant'] = value3[propyouwant]
$scope.formattedData.push(angular.extend({}, item));
})
})
})
//now you can render your data without somersould
EDIT 编辑
For increasing performance and avoid to use angular extend; 为了提高性能并避免使用角度延伸;
$scope.formattedData = [];
angular.forEach(activeHero.gems, function(value, key){
angular.forEach(value.atrtibutes, function(value2, key2){
angular.forEach(value2.primary, function(value3, key3){
//start build your item here
var item = {
prop1: value['prop'],
prop2: value2['prop']
}
//not required extend item;
$scope.formattedData.push(item);
})
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.