difficulty 运行 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 and looked at , , and 堆栈问题,但我根本不明白 ng-repeat 是如何工作的。我只是有语法问题吗?还是对概念的更广泛的误解?
只需在 ng-repeat
div 中使用 person
而不是 vm.myData[person]
。
本质上,ng-repeat
将为数组 myData
的每个元素重复 HTML 元素中的任何内容,您可以在其中将每个元素用作 person
在 [=16] 中定义的位置=]
ng-repeat
属性就像一个 for
循环。在您的情况下 vm.myData
是一个对象数组。因此,执行 <div ng-repeat="person in vm.myData">
将使您使用 person
访问每个对象。所以,现在你可以做 {{ person.activeReferralsType }}
作为例子。
希望对您有所帮助。
我有一个 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 and looked at
只需在 ng-repeat
div 中使用 person
而不是 vm.myData[person]
。
本质上,ng-repeat
将为数组 myData
的每个元素重复 HTML 元素中的任何内容,您可以在其中将每个元素用作 person
在 [=16] 中定义的位置=]
ng-repeat
属性就像一个 for
循环。在您的情况下 vm.myData
是一个对象数组。因此,执行 <div ng-repeat="person in vm.myData">
将使您使用 person
访问每个对象。所以,现在你可以做 {{ person.activeReferralsType }}
作为例子。
希望对您有所帮助。