如何在缺少对象的某些字段时使用ng-repeat

Question

I am using ng-repeat of Angular JS on an object. My code is like,

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

Now dashboard.portfoliotech looks like, dashboard.portfolioTech = { 'Contact Center EA', 'Contact Center HCS','Contact Center Other','Remote Expert'}

But, dashboard.portfolio is an object which looks like

In dashboardSrv , var s=this But in UI I want to show these (under each technology, the corresponding technology) for each Month/ Quarter. Percentage values are computed correctly. Month/ Quarters are shown correctly. But, data is not shown correctly (sometimes the % goes under wrong technology). My UI looks like,

How to fix that?

Answer 1

In your last repeat

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

I suggest repeating over portfolioTech instead.

ng-repeat="tech in dashboardSrv.portfolioTech"

and in the binding that follows you place

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

In short:

This line:

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

becomes this line:

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