개체의 일부 필드가 누락 된 경우 ng-repeat를 사용하는 방법

Question

개체에 Angular JS의 ng-repeat를 사용하고 있습니다. 내 코드 dashboard.portfolio 보이는 객체이며,

<thead> 
    <tr> 
     <th style="text-transform: capitalize;">{{monthOrquarter || "month"}} 
     </th> 
     <th ng-repeat="tech in dashboardSrv.portfolioTech">{{tech}} 
     </th> 
     </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="(month, data) in dashboardSrv.portfolio[monthOrquarter || 'month']"> 
     <td class="rt-td1" style="border-bottom: 1px solid white !important; border-top: 2px;">{{month}} 
     </td> 
     <td class="rt-td1" style="border-bottom: 1px solid white !important; border-top: 2px;" ng-repeat="(tech, percentage) in data" ng-show="data.tech != 'total'">{{percentage | number: 2}}% 
     </td> 
    </tr> 
</tbody> 

지금 dashboard.portfoliotech의 모습처럼, dashboard.portfolioTech = { 'Contact Center EA', 'Contact Center HCS','Contact Center Other','Remote Expert'}

입니다하지만 UI에 내가 보여주고 싶은 var s=this 그러나 dashboardSrv에서

같은 각 달/분기에 대해 (각 기술, 해당 기술에 따라) 백분율 값이 올바르게 계산됩니다. 월/분기가 올바르게 표시됩니다. 그러나 데이터가 올바르게 표시되지 않습니다 (때로는 잘못된 기술을 사용하는 경우가 있습니다). 내 UI 모양은 다음과 같습니다.

수정 방법? 마지막 반복

ng-repeat="(tech, percentage) in data" 

을에서

Answer 1

내가 대신 portfolioTech을 통해 반복하는 것이 좋습니다.

ng-repeat="tech in dashboardSrv.portfolioTech" 

다음과 그 바인딩의

당신은 한마디로

{{data[tech] | number: 2}}% 

장소 :

이 줄을 :

<td class="rt-td1" style="border-bottom: 1px solid white !important; border-top: 2px;" ng-repeat="tech in dashboardSrv.portfolioTech" ng-show="data.tech != 'total'">{{data[tech] | number: 2}}% 
    </td> 

:

<td class="rt-td1" style="border-bottom: 1px solid white !important; border-top: 2px;" ng-repeat="(tech, percentage) in data" ng-show="data.tech != 'total'">{{percentage | number: 2}}% 
    </td> 

이 라인이된다