繁体   English   中英

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

[英]how to use ng-repeat when some fields of the object are missing

我在一个对象上使用Ang-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 = { 'Contact Center EA', 'Contact Center HCS','Contact Center Other','Remote Expert'}

但是, dashboard.portfolio是一个看起来像的对象 对象结构

dashboardSrvvar s=this但是在UI中我想为每个月/季度显示这些(在每种技术下,相应的技术)。 百分比值是正确计算的。 月/季度显示正确。 但是,数据没有正确显示(有时%是错误的技术)。 我的UI看起来像, UI Screeshot

如何解决?

在你上次重复

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

我建议重复一下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, 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM