javascript - 当对象的某些字段丢失时如何使用 ng-repeat

Question

我正在一个对象上使用 Angular JS 的 ng-repeat。我的代码就像，

<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 = { '联系中心 EA', '联系中心 HCS','联系中心其他','远程专家'}

但是，dashboard.portfolio是一个看起来像的对象

在dashboardSrv中，var s=this 但在用户界面中，我想显示每个月/季度的这些(在每种技术下，相应的技术)。百分比值计算正确。月份/季度显示正确。但是，数据显示不正确(有时百分比采用了错误的技术)。我的用户界面看起来像，

如何解决这个问题？

Answer 1

在最后一次重复中

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

我建议重复投资组合技术。

ng-repeat="tech in dashboardSrv.portfolioTech"

并在您放置的绑定(bind)中

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

简而言之:

这一行:

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

变成这一行:

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