角中继器属性改变？答案

【问题标题】：Angular repeater properties change?角中继器属性改变？
【发布时间】：2015-11-12 01:18:35
【问题描述】：

我正在根据个人利益创建图块。我想使用 ng-repeat 来遍历登录用户可能拥有的不同好处，然后渲染填充有属性信息的图块。也就是说，如果数组中返回的每个好处都略有不同，那么最好的方法是什么，或者您可以分享一个示例？我的意思是，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 语句运行更容易。请给点意见？

非常感谢！

【问题讨论】：

“所以你可以看出问题出在哪里了？”不，不是真的。如果您试图建议您有两个略有不同的元素，最好只列出这两个元素并突出显示差异，而不是试图列出您的整个代码并希望其他人可以在随意阅读时发现差异没有您的特定领域知识。
另外，我怀疑你的意思是写ppt in Benefits而不是Benefits in ppt。
是的，意思是 ppt 中的好处。我的意思是，每个图块都应该渲染相同，因为图片只是一个图表，如果所有图块都相同，它会是什么样子。如前所述，某些图块可能不会显示“剩余金额：”或类似的东西。从属性中可以看出，它们确实有所不同。
我的观点是，任何研究数据的人都必须非常努力地寻找差异，而且很多人不会花那么多时间。除此之外，您并没有真正提出问题，只是提到您遇到了更改字段的问题，并提到了您未显示的 switch 或 case 语句。至少在您的 cmets 中，您暗示了潜在的差异，但是您仍然不清楚在这种情况下要渲染什么。您执行提供的代码看起来可以正常工作，但不清楚为什么它不是您想要的。

标签： javascript html arrays angularjs sorting

【解决方案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

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

那么当您收到数据时如何转换您的响应？（您也没有显示...！）您应该能够使 Benefits.lastIncurDate 看起来像您发现可用的任何内容。

【讨论】：