難以為一組對象運行 ng-repeat (difficulty running ng-repeat for an array of objects)

問題描述

難以為一組對象運行 ng‑repeat (difficulty running ng‑repeat for an array of objects)

我有一個 html 代碼塊，我想為對像數組中的每個對象重複該代碼塊，其中每個對象將填充這樣的部分...

<!‑‑  ‑‑>
<!‑‑ Future appointments section ‑‑>
<!‑‑  ‑‑>
<div class="future‑appointments‑meta‑holder" ng‑repeat="person in vm.myData">

 <div class="future‑appointments‑holder">
   <div class="future‑appointments‑info‑holder">
     <p class="future‑appointments‑info‑holder‑text">
       {{vm.myData[person].activeReferralsType}}
     </p>
     <p class="future‑appointments‑info‑holder‑text‑secondary">
       {{vm.myData[person].activeReferralsDate}} | {{vm.myData[person].activeReferralsTime}}
     </p>
   </div>

   <div class="future‑appointments‑info‑holder‑mid">
     <p class="future‑appointments‑info‑holder‑text‑col2">
       <b>{{vm.myData[person].referredFromName}}</b>
     </p>
     <p class="future‑appointments‑info‑holder‑text‑col2">
       {{vm.myData[person].referredFromAddressFacilityName}}
     </p>
     <p class="future‑appointments‑info‑holder‑text‑col2">
       {{vm.myData[person].referredFromAddressFacilityAddressLineOne}}
     </p>
     <p class="future‑appointments‑info‑holder‑text‑col2">
       {{vm.myData[person].referredFromAddressFacilityAddressLineTwo}}, {{vm.myData[person].referredFromAddressFacilityAddressState}} {{vm.myData[person].referredFromAddressFacilityAddressZip}}
     </p>
   </div>

   <div class="future‑appointments‑info‑holder‑right2">
     <p class="future‑appointments‑info‑holder‑text‑col2">
       PUBLIC | {{vm.myData[person].referredFromPublicNum}}
     </p>
     <p class="future‑appointments‑info‑holder‑text‑col2">
       BACK | {{vm.myData[person].referredFromBackNum}}
     </p>
     <p class="future‑appointments‑info‑holder‑text‑col2">
       DOCTOR | {{vm.myData[person].referredFromDocNum}}
     </p>
   </div>
 </div>
 <div class="horizontal‑rule">

 </div>
</div>
<!‑‑  ‑‑>
<!‑‑ END future appointments section ‑‑>
<!‑‑  ‑‑>

我的數據集看起來像這個

vm.myData = [
          {
            "alert": "2"
            , "activeReferralsType" : "new patient diabetic eye exam"
            , "activeReferralsDate" : "September 30, 2017"
            , "activeReferralsTime" : "2:00PM"
            , "referredFromName" : "Karen Rush, MD"
            , "referredFromAddressFacilityName" : "Random Family Practice"
            , "referredFromAddressFacilityAddressLineOne" : "1108 Cedar Road"
            , "referredFromAddressFacilityAddressLineTwo" : "Chesapeake"
            , "referredFromAddressFacilityAddressState" : "VA"
            , "referredFromAddressFacilityAddressZip" : "90210"
            , "referredFromPublicNum" : "218.202.4561"
            , "referredFromBackNum" : "218.556.4568"
            , "referredFromDocNum" : "218.555.5555"
            , "referredToName" : "Karen Rush, MD"
            , "referredToAddressFacilityName" : "Random Family Practice"
            , "referredToAddressFacilityAddressLineOne" : "1108 Cedar Road"
            , "referredToAddressFacilityAddressLineTwo" : "Chesapeake"
            , "referredToAddressFacilityAddressState" : "VA"
            , "referredToAddressFacilityAddressZip" : "90210"
            , "referredToPublicNum" : "218.202.4561"
            , "referredToBackNum" : "218.556.4568"
            , "referredToDocNum" : "218.555.5555"

          },
          {
            "alert": "3"
            , "activeReferralsType" : "new patient diabetic eye exam"
            , "activeReferralsDate" : "Ontober 22, 2017"
            , "activeReferralsTime" : "1:00PM"
            , "referredFromName" : "Mark Spencer, MD"
            , "referredFromAddressFacilityName" : "Medical Life Practice"
            , "referredFromAddressFacilityAddressLineOne" : "666 Road Way"
            , "referredFromAddressFacilityAddressLineTwo" : "Houston"
            , "referredFromAddressFacilityAddressState" : "TX"
            , "referredFromAddressFacilityAddressZip" : "39405"
            , "referredFromPublicNum" : "218.900.3333"
            , "referredFromBackNum" : "218.111.0000"
            , "referredFromDocNum" : "218.445.2135"
            , "referredToName" : "Gul Dukat, MD"
            , "referredToAddressFacilityName" : "St. Vincent Hospital"
            , "referredToAddressFacilityAddressLineOne" : "1 Hosipital Road"
            , "referredToAddressFacilityAddressLineTwo" : "New York"
            , "referredToAddressFacilityAddressState" : "NY"
            , "referredToAddressFacilityAddressZip" : "33330"
            , "referredToPublicNum" : "218.552.2131"
            , "referredToBackNum" : "218.555.1234"
            , "referredToDocNum" : "218.555.5555"

          }
        ];

我已經閱讀了documentation 並查看了 this、this 和 這個堆棧問題，但我根本不明白 ng‑repeat 是如何工作的。我只是有語法問題嗎？還是對這個概念有更廣泛的誤解？

參考解法

方法 1:

Just use person instead of vm.myData[person] inside your ng‑repeat div.

Essentially the ng‑repeat will repeat whatever you have inside that HTML element for each element of the array myData where you can use each element as person where you defined in ng‑repeat="person in vm.myData"</p>

方法 2:

ng‑repeat attribute is like a for loop. In your situation vm.myData is an array of objects. Therefore doing <div ng‑repeat="person in vm.myData"> will make you access each object using person. So, now you can do {{ person.activeReferralsType }} as an example.

Hope this helps.

(by IWI、taguenizy、Evans Murithi)

參考文件

1. difficulty running ng‑repeat for an array of objects (CC BY‑SA 2.5/3.0/4.0)