Question

我正在根据个人利益创建瓷砖。我想使用ng-repeat来迭代登录用户可能拥有的不同好处，然后渲染填充了属性信息的tile。也就是说，如果例如在数组中返回的每个好处稍有不同，那么您可以分享的最佳方法或示例是什么？我的意思是，API调用返回的JSON数据类似于：

  "Benefits": [
    {
      "beginDate": "2014-01-01T00:00:00",
      "endDate": "2014-12-31T00:00:00",
      "balance": 855,
      "annualAmt": 1000,
      "contribAmt": 958.41,
      "claimAmt": 145,
      "reimbAmt": 0,
      "amtToClaim": 145,
      "lastIncurDate": "2014-11-20T00:00:00",
      "lastSubmitDate": "2015-03-31T00:00:00",
      "id": "hECT9z9f0kzx9dFKR1aHaQ%3d%3d",
      "benefit": "FSA",
      "name": "Day Care FSA",
      "planTypeId": 1,
      "benefitTypeId": 2,
      "benefitCode": "DCFSA"
    },
    {
      "beginDate": "2014-01-01T00:00:00",
      "endDate": "2014-12-31T00:00:00",
      "balance": 624.05,
      "annualAmt": 720,
      "contribAmt": 750,
      "claimAmt": 95.95,
      "reimbAmt": 25,
      "amtToClaim": 70.95,
      "lastIncurDate": "2014-12-31T00:00:00",
      "lastSubmitDate": "2015-03-31T00:00:00",
      "id": "nBigB7RCvDmxg9xGph8SGA%3d%3d",
      "benefit": "FSA",
      "name": "Health Care FSA",
      "planTypeId": 1,
      "benefitTypeId": 1,
      "benefitCode": "HCFSA"
    },
    {
      "beginDate": "2015-01-01T00:00:00",
      "endDate": "2015-12-31T00:00:00",
      "balance": 3000,
      "annualAmt": 3000,
      "contribAmt": 0,
      "claimAmt": 0,
      "reimbAmt": 0,
      "amtToClaim": 0,
      "lastIncurDate": "2015-12-31T00:00:00",
      "lastSubmitDate": "2016-03-31T00:00:00",
      "id": "WUNKhLDimFQc1Fa7JV0nBA%3d%3d",
      "benefit": "FSA",
      "name": "Day Care FSA",
      "planTypeId": 1,
      "benefitTypeId": 2,
      "benefitCode": "DCFSA"
    },
    {
      "beginDate": "2015-01-01T00:00:00",
      "endDate": "2015-12-31T00:00:00",
      "balance": 2500,
      "annualAmt": 2500,
      "contribAmt": 0,
      "claimAmt": 0,
      "reimbAmt": 0,
      "amtToClaim": 0,
      "lastIncurDate": "2015-12-31T00:00:00",
      "lastSubmitDate": "2016-03-31T00:00:00",
      "id": "eYjicL2j0ogvtN%2bjEs8kGw%3d%3d",
      "benefit": "FSA",
      "name": "Health Care FSA",
      "planTypeId": 1,
      "benefitTypeId": 1,
      "benefitCode": "HCFSA"
    },
    {
      "beginDate": "2015-01-01T00:00:00",
      "endDate": "2015-12-31T00:00:00",
      "balance": 4000,
      "annualAmt": 4000,
      "claimAmt": 0,
      "payableAmt": 0,
      "reimbAmt": 0,
      "amtToClaim": 0,
      "id": "NkO5zMJvWr%2f1XfSG3x%2fXRA%3d%3d",
      "benefit": "HRAPrime",
      "name": "HRADED",
      "planTypeId": 4,
      "benefitTypeId": 14,
      "benefitCode": "HRADED"
    },
    {
      "balance": 0,
      "ordersPlaced": 0,
      "fundsUsed": 0,
      "lastOrder": 0,
      "currentOrder": 0,
      "currentOrderMonth": "September",
      "lastUpdateDay": "2015-08-25T00:00:00",
      "id": "MvI9bsKE08CQa8AdaymmPw%3d%3d",
      "benefit": "FlexiPass",
      "name": "Flexi-Pass Transit/Vanpool Benefit",
      "planTypeId": 6,
      "benefitTypeId": 29,
      "benefitCode": "FCTRANS"
    },
    {
      "balance": 0,
      "ordersPlaced": 0,
      "fundsUsed": 0,
      "lastOrder": 100,
      "currentOrder": 0,
      "currentOrderMonth": "September",
      "lastUpdateDay": "2015-08-25T00:00:00",
      "id": "YfZ10n9I%2bgbmxBjoqwVYPw%3d%3d",
      "benefit": "FlexiPass",
      "name": "Flexi-Pass Parking Benefit",
      "planTypeId": 6,
      "benefitTypeId": 30,
      "benefitCode": "FCPARK"
    },
    {
      "balance": 0,
      "ordersPlaced": 0,
      "fundsUsed": 0,
      "lastOrder": 0,
      "currentOrder": 0,
      "currentOrderMonth": "September",
      "lastUpdateDay": "2015-08-25T00:00:00",
      "id": "j0AQs5lJksAZb%2fVYcwwSSg%3d%3d",
      "benefit": "FlexiPass",
      "name": "Flexi-Pass Bicycle Benefit",
      "planTypeId": 6,
      "benefitTypeId": 31,
      "benefitCode": "FCBICY"
    }
  ],

我的html通过转发器运行：

<div class="container">
    <h1>My Benefits</h1>
    <div class="col-md-4 beneTile" data-ng-repeat="Benefits in ppt">
        <h4> {{ ppt.name }} </h4>
        <div style="margin: 5px;">    
            <ul class="list-inline">
                <li>Balance:</li>
                <li> {{ ppt.balance }} </li>
            </ul>
            <ul class="list-inline">
                <li>Annual Election:</li>
                <li> {{ ppt.annualAmt }} </li>
            </ul>       
             <ul class="list-inline">
                <li>Contributed to Date:</li>
                <li> {{ ppt.contribAmt }} </li>
            </ul>  
            <ul class="list-inline">
                <li>Claimed to Date:</li>
                <li> {{ ppt.claimAmt }} </li>
            </ul>
            <ul class="list-inline">
                <li>Reimbursed to Date:</li>
                <li> {{ ppt.reimbAmt }} </li>
            </ul>       
             <ul class="list-inline">
                <li>Amount left to Claim:</li>
                <li> {{ ppt.amtToClaim }} </li>
            </ul>
            <ul class="list-inline">
                <li>Last Day to Incur:</li>
                <li> {{ ppt.Benefits[0].lastIncurDate }} </li>
            </ul>       
             <ul class="list-inline">
                <li>Last Day to Submit:</li>
                <li> {{ ppt.lastSubmitDate }} </li>
            </ul> 
        </div>            
    </div>
</div>

所以你可以看到问题出在哪里？基本上，瓷砖本身看起来应该是相同的，并且在一个好处可能具有附加属性或类似的情况下，Angular会足够聪明地添加它（有点像过滤器或其他东西）。屏幕截图用空白字段表示，但概念是相同的。似乎应该比通过switch或case语句运行更容易。想法好吗？

非常感谢！

Answer 1

我实际上不知道你在问什么（！），但我还是会尝试：我会列出你想要展示的属性：

$scope.props = [
    { name: "balance", label: "Balance"}
    { name: "annualAmt", label: "Annual Election"}
    ....
];

（你可以从你的结构中获取它们，但你必须在某处定义你的标签......）然后使用嵌套重复显示它，例如：

<div data-ng-repeat="ppt in Benefits">
    <h4> {{ ppt.name }} </h4>
    <div data-ng-repeat="prop in Props">
        <ul class="list-inline" ng-show="ppt[prop.name].length > 0">
            <li> {{ prop.label }} </li>
            <li> {{ ppt[prop.name] }} </li>
        </ul>
    </div>
</div>

示例：http://plnkr.co/edit/6BjheSkR8dTjziZB86AT?p=preview

这就是你的意思＆＃34;添加它（有点像过滤器或其他东西）。＆＃34;？或者......如果你在谈论ppt.Benefits[0]？这是否意味着你在某处有一个$ scope.ppt（你出于某种神秘的原因选择不显示）？

然后在收到数据时转换您的回复呢？（你没有显示......！）你应该能够使Benefits.lastIncurDate看起来像你觉得可用的任何东西。

角度转发器属性有变化吗？

1 个答案: