Question

我正在尝试使用AngularJS的另一个ng-repeat中的ng-repeat在一行中填充多个值的td。我一直在努力，直到我尝试访问第三个嵌套对象。

对象heicarchy：

object

-renewalUIs

--patentUI

---property.patentApplicationNumber (this is what I want to access)

最初我开始使用$.each函数循环遍历每个对象，然后我遇到了这个帖子Nested ng-repeat，它解释了循环数据更有效，更容易。我的问题是我可以访问renewalUIs的属性，但是当我在ng-repeat语法中添加一个额外的对象时，没有数据显示。

此代码有效：

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs">{{item.renewalDueDate}}<br></span> 
    </td>
</tr>

这不是（但我需要它）：

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs.patentUI">{{item.patentApplicationNumber}}<br></span>   
    </td>
</tr>

问题

为什么我的td填充了来自patentUI对象的数据？

JSON

[  
   {  
      "renewalUIs":[  
         {  
            "patentUI":{  
               "patentApplicationNumber":"112233.4",
               "title":"A patent generated by createDummyPatentUiForSearchAddPatent()",
               "filingDate":1171411200000,
               "business":{  
                  "businessNumber":"Bo2",
                  "businessPin":3586,
                  "businessName":"Bodget and Scarper Patent Lawyers In",
                  "phoneNumber":"203141703",
                  "timezone":"(UTC-08:00) Pacific Time (US & Canada)",
                  "street":"Thats a real town name",
                  "city":"Cut and Shooper",
                  "zip":54321,
                  "isBillingAddressSame":true,
                  "billingStreet":"bStr",
                  "billingCity":"bCty",
                  "billingState":"bStt",
                  "billingZip":2222,
                  "id":1,
                  "version":48,
                  "usstate":"Texas"
               },
               "primaryApplicantName":"James Dean",
               "clientRef":"Electric Bananas",
               "shortTitle":"Jimaroo",
               "epoPatentStatus":"EMPTY",
               "lastRenewedDateExEpo":1485648000000,
               "renewalYear":7,
               "renewalStatus":"Renewal in place",
               "patentPublicationNumber":"112233.4+1",
               "notifications":null,
               "id":1,
               "version":17,
               "currentRenewalCost":1.11,
               "costBandEndDate":1501424837236,
               "renewalCostNextStage":1111111.11,
               "renewalDueDate":1488240000000,
               "filingDateUI":"Wed Feb 14, 2007",
               "notificationUIs":null,
               "costBandEndDateUI":"Sun Jul 30, 2017",
               "renewalDueDateUI":"Tue Feb 28, 2017",
               "lastRenewedDateExEpoUI":"Sun Jan 29, 2017"
            }
         },
         {  
            "patent":null,
            "activePaymentId":null,
            "fee":{  
               "renewal":null,
               "renewalFee_EUR":123.45,
               "extensionFee_EUR":234.56,
               "processingFee_USD":20.00,
               "expressFee_USD":230.00,
               "urgentFee_USD":0.00,
               "latePayPenalty_USD":0.00,
               "fxRate":0.88,
               "subTotal_USD":608.01,
               "id":2,
               "version":0
            },
            "certificate":{  
               "renewal":null,
               "certificateName":"Harry",
               "issueDate":1499778000000,
               "docPath":"hardcodedpdffolder/certificates/",
               "filename":"dummyCertificateNumber 1.pdf",
               "certificateTemplateId":"DemoCert#01",
               "id":1,
               "version":0,
               "url":"hardcodedpdffolder/certificates/dummyCertificateNumber 1.pdf"
            },
            "renewalYear":14,
            "renewalDueDate":1512086399000,
            "renewalPeriod":"Green",
            "renewalStatus":"Renewal in place",
            "renewalAttemptsMade":1,
            "id":2,
            "version":0,
            "renewalDueDateUI":"Thu Nov 30, 2017",
            "certificateUrl":"hardcodedpdffolder/certificates/dummyCertificateNumber 1.pdf",
            "patentUI":{  
               "patentApplicationNumber":"332211",
               "title":"A patent inspired by Despicable Me",
               "filingDate":1173657600000,
               "business":{  
                  "businessNumber":"Bo2",
                  "businessPin":3586,
                  "businessName":"Bodget and Scarper Patent Lawyers In",
                  "phoneNumber":"203141703",
                  "timezone":"(UTC-08:00) Pacific Time (US & Canada)",
                  "street":"Thats a real town name",
                  "city":"Cut and Shooper",
                  "zip":54321,
                  "isBillingAddressSame":true,
                  "billingStreet":"bStr",
                  "billingCity":"bCty",
                  "billingState":"bStt",
                  "billingZip":2222,
                  "id":1,
                  "version":48,
                  "usstate":"Texas"
               },
               "primaryApplicantName":"Paul Newman",
               "clientRef":"Gru",
               "shortTitle":"Steal the Moon !",
               "epoPatentStatus":"EMPTY",
               "lastRenewedDateExEpo":null,
               "renewalYear":-1,
               "renewalStatus":"Renewal in place",
               "patentPublicationNumber":"112233.4+2",
               "notifications":null,
               "id":2,
               "version":0,
               "currentRenewalCost":1.11,
               "costBandEndDate":1501424837240,
               "renewalCostNextStage":1111111.11,
               "renewalDueDate":1490914800000,
               "filingDateUI":"Mon Mar 12, 2007",
               "notificationUIs":null,
               "costBandEndDateUI":"Sun Jul 30, 2017",
               "renewalDueDateUI":"Fri Mar 31, 2017",
               "lastRenewedDateExEpoUI":""
            }
         }
      ]
   }
]

Answer 1

patentUI是每个renewalUI的属性吗？

如果是这样的情况，ng-repeat将无法正常工作。您可以使用指令ng-repeat来迭代集合对象（如数组）。

ngRepeat指令从a中为每个项目实例化一次模板集合。

https://docs.angularjs.org/api/ng/directive/ngRepeat

所以代码可以工作

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs">{{item.patentUI.patentApplicationNumber}}<br></span>   
    </td>
</tr>

用复杂的JSON填充嵌套的ng-repeat

1 个答案: