オブジェクトの配列に対してng-repeatを実行するのが難しい

Question

私は、オブジェクトの配列内の各オブジェクトに対して繰り返したい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、およびthisスタックの質問を見てきたようなものに見えますが、私は単にどのようにNGリピート作品を理解していません。構文の問題がありますか？それともコンセプトの誤解ですか？

Answer 1

divにvm.myData[person]の代わりにpersonを使用してください。
基本的にng-repeatはあなたが属性がforループのようなものですng-repeat="person in vm.myData"

Answer 2

ng-repeatで定義しpersonとして各要素を使用することができ、アレイmyDataの各要素に対して、そのHTML要素の内部で持っているものは何でも繰り返されます。あなたの状況では、vm.myDataはオブジェクトの配列です。したがって、<div ng-repeat="person in vm.myData">を実行すると、personを使用して各オブジェクトにアクセスできます。だから今は{{ person.activeReferralsType }}を例に挙げることができます。

これが役に立ちます。