javascript - 访问 Angular js中嵌套对象中的嵌套数组

Question

我正在使用 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>

Answer 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

我想您可能希望客户的每个工作都有一张“卡”，代码如下:

<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>