在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"
   }]
 }];

我正在嘗試訪問作業中的名稱屬性，我嘗試了以下操作

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

Answer 2

您沒有明確地說您的數組稱為客戶，所以我假設是。

您有一系列客戶，每個客戶都有一個或多個工作。 如果要顯示每個客戶的所有作業的名稱，則需要使用嵌套的ng-repeats。 我不確定您要重復用戶界面的哪一部分，但是我只是使用'card-hero'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，以顯示顯示了每個客戶下的每個作業