我正在使用angularjs 1.我有一个非常复杂的json对象,有很多嵌套。我想在json上使用ng-repeat来访问嵌套数组。
[{
"information": {
"name": "simdi jinkins",
"phone": "08037775692",
"email": "sim04ful@gmail",
"whatsapp": "8349493420",
"residential": "gwarinpa",
"office": "dansarari plaza"
},
"jobs": [{
"name": "jeans and shirt",
"measurement": {
"shoulder": "34",
"waist": "44",
"neck": "86",
"front": "42",
"length": "33",
"boost": "80",
"cap": "30",
"sleeves": "12",
"tommy": "30",
"thigh": "30",
"chest": "34",
"back": "40"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "skirt and blouse",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}, {
"information": {
"name": "Paula Odama",
"phone": "08034698692",
"email": "paulyd@gmail",
"whatsapp": "8348733420",
"residential": "inpa",
"office": "dansaza"
},
"jobs": [{
"name": "gown",
"measurement": {
"shoulder": "74",
"waist": "44",
"neck": "76",
"front": "42",
"length": "73",
"boost": "80",
"cap": "37",
"sleeves": "72",
"tommy": "30",
"thigh": "70",
"chest": "37",
"back": "70"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "robes",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}];
我正在尝试访问我尝试过以下的作业中的name属性
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{customer.jobs.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
答案 0 :(得分:1)
因为customer.jobs是一个数组,所以必须使用和索引或键访问它。
在您的示例中,执行此操作的方法是使用customer.jobs [0] .name。
生成的HTML会这样:
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<div data-ng-repeat="job in customer.jobs">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
<强>更新强>
这是一系列客户,每个客户都包含一系列工作。因此,您需要一个双中继器来循环第一个和第二个数组。
更新2
我想你可能想要一张卡片&#39;根据客户的每项工作,该代码如下:
<div data-ng-repeat="customer in customers">
<div ng-repeat="job in customer.jobs" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
</div>
答案 1 :(得分:1)
你没有明确说你的数组被称为客户,所以我假设它是。
您拥有一系列客户,每个客户都有一个或多个工作。如果要为每个客户显示所有作业的名称,则需要使用嵌套的ng-repeats。我不确定你想要重复你的UI的哪一部分,但我只是选择'卡片 - 英雄'div。
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<h1>{{customer.information.name}}</h1>
<div ng-repeat="job in customer.jobs" class="card-hero" style="">
<h2>{{job.name}} <span>{{}}</span> </h2>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
编辑:添加了h1客户名称,并将作业名称更改为h2,以显示每个客户下的每个作业都显示