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

Question

我正在尝试使用 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":""
            }
         }
      ]
   }
]

Answer 1

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>