我正在尝试使用 AngularJS 的 ng-repeat 在另一个 ng-repeat 中在单行中填充具有多个值的 td。在我尝试访问第三个嵌套对象之前，我一直在使用它。
对象层次结构:
对象
-renewalUIs
--patentUI
---property.patentApplicationNumber(这是我要访问的)
最初我从一个$.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":""
}
}
]
}
]
最佳答案
patentUI 是每个 renewalUI 的属性吗？
如果是这种情况，ng-repeat 将无法正常工作。您可以使用指令 ng-repeat 迭代集合对象(就像数组一样)。
The ngRepeat directive instantiates a template once per item from a collection.
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>
关于javascript - 使用复杂的 JSON 填充嵌套的 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45375743/