동일한 요소에 AngularJS 중첩 된 ngRepeat

Question

숨겨진 더미 요소를 만들지 않고 AngularJS 뷰에서 중첩 루프를 수행하는 방법이 있습니까? 이 같은

뭔가 :

<ul> 
    <li ng-repeat="gem in activeHero.gems" 
     ng-repeat="(key, value) in gem.attributes" 
     ng-repeat="attr in value"> 
      {{attr.text}} 
    </li> 
</ul> 

또는이

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

이 둘 다 가능 AFAIK입니다.

기본적으로 내 HTML이 기반으로하는 JSON과 다른 구조를 갖기를 바랍니다. 어떻게이 문제를 해결할 수 있습니까? HTML 요소없이보기 내부에서 루프를 만드는 방법이 있습니까?

예는 상술과 같은 JSON 구조 위에 루프 것이다 :

JSON는

"activeHero" = { 
    "gems" : [ { 
    "attributes" : { 
     "primary" : [ { 
     "text" : "+220 Intelligence" 
     } ], 
     "secondary" : [ ], 
     "passive" : [ ] 
    } 
    }, { 
    "attributes" : { 
     "primary" : [ { 
     "text" : "+220 Intelligence" 
     } ], 
     "secondary" : [ ], 
     "passive" : [ ] 
    } 
    }, { 
    "attributes" : { 
     "primary" : [ { 
     "text" : "+160 Intelligence" 
     } ], 
     "secondary" : [ ], 
     "passive" : [ ] 
    } 
    } ] 
} 

(이 용 블리자드 API의 실제 JSON 응답이다 (명확성을 위해 많은을 박탈) 비디오 게임 "Diablo 3")

Answer 1

렌더링 전에 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 

성능을 증가시키고, 연장 각 사용 방지 편집

;

$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); 
       }) 
     }) 
})