對於一組對象運行ng-repeat時遇到的困難

我有一塊html代碼，我希望爲對象數組中的每個對象重複一次，其中每個對象將填充這樣的部分...對於一組對象運行ng-repeat時遇到的困難

<!-- --> 
<!-- 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和this棧的問題，但我根本不明白是怎麼NG重複的作品。我只是有一個語法問題？還是對這個概念有更廣泛的誤解？

來源

2016-11-23 IWI

另外，你應該使用一個跟蹤語句爲你重複性能。 – alphapilgrim

將明確地添加，謝謝 – IWI

只需在ng-repeat div內使用person而不是vm.myData[person]。
本質上ng-repeat將重複任何你有對於陣列myData中的每個元素在這裏可以使用的每個元素作爲person，您在ng-repeat="person in vm.myData"

來源

2016-11-23 14:05:07 taguenizy

ng-repeat屬性定義的HTML元素內就像一個for迴路。在你的情況下，vm.myData是一個對象數組。因此，使用<div ng-repeat="person in vm.myData">將使您使用person訪問每個對象。所以，現在你可以做{{ person.activeReferralsType }}作爲例子。

希望這會有所幫助。

來源

2016-11-23 14:06:16

對於一組對象運行ng-repeat時遇到的困難

回答

相關問題