我正在尝试使用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":""
}
}
]
}
]
答案 0 :(得分: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>