在表中循環遍歷數組中的角ng-

我正在使用Angular與Smart-Table來遍歷嵌套的對象數組以填充表。我能夠輕鬆地獲得一些價值，但其他人卻很困難。在下面的示例數據中，您將看到鍵voucherNumber,vendor,description和amount被附加到數組值。它們以這樣的方式相關，即voucherNumber[0],vendor[0],description[0]和amount[0]都指代相同的文件。在表中循環遍歷數組中的角ng-

目前，我的以下代碼正確顯示period，uploadDate和transferCode。它只是顯示陣列（例如休息，voucherNumber下是兩個表格單元，一個包含["34", "22"]和其他["12", "32"]。

我知道這個模型的結構是有點令人費解，我打算在簡化它位稍後有什麼辦法，我可以用NG-重複工作，得到它在我的表中正確顯示暫且

//Sample Code 
[{ 
    "period": 4, 
    "uploadDate": "2015-11-19T21:00:00.000Z", 
    "section":[{ 
     "transferCode": 8675309, 
     "details": [ 
     { 
      "voucherNumber": ["34", "22"], 
      "vendor": ["jimmy", "jonny"], 
      "description": ["blah", "blah2"], 
      "amount": [45555, 3421] 
     } 
     ] 
    }] 
    }, 
    { 
    "period": 4, 
    "uploadDate": "2015-11-19T21:00:00.000Z", 
    "section":[{ 
     "transferCode": 45576543, 
     "details": [ 
     { 
      "voucherNumber": ["12", "32"], 
      "vendor": ["jane", "sarah"], 
      "description": ["eep", "orp"], 
      "amount": [97864, 23214] 
     } 
     ] 
    }] 

    }] 

//HTML and Angular 

<div class="container"> 
    <div ng-controller="TransferController as transfers"> 

    <table st-table="transfers" class="table table-striped"> 
     <thead> 
     <tr> 
      <th st-sort="period">Period</th> 
      <th st-sort="uploadDate">Upload Date</th> 
      <th st-sort="uploadDate">Transfer Code</th> 
      <th st-sort="vendor">Vendor</th> 
      <th st-sort="description">Description</th> 
      <th st-sort="amount">Amount (SSP)</th> 
     </tr> 
     <tr> 
     <tr> 
      <th colspan="4"> 
      <input st-search placeholder="global search" class="input-sm form-control" type="search"/> 
      </th> 
     </tr> 
      <th> 
      <input st-search="period" placeholder="search by period" class="input-sm form-control" type="search"/> 
      </th> 
      <th> 
      <input st-search="uploadDate" placeholder="search by upload date" class="input-sm form-control" type="search"/> 
      </th> 
      <th> 
      <input st-search="transferCode" placeholder="search by transfer code" class="input-sm form-control" type="search"/> 
      </th> 
      <th> 
      <input st-search="vendor" placeholder="search by vendor" class="input-sm form-control" type="search"/> 
      </th> 
      <th> 
      <input st-search="description" placeholder="search by description" class="input-sm form-control" type="search"/> 
      </th> 
      <th> 
      <input st-search="amount" placeholder="search by amount" class="input-sm form-control" type="search"/> 
      </th> 
     </tr> 
     </thead> 
     <tbody ng-repeat="toplevel in transfers.all"> 
     <tr ng-repeat="code in toplevel.section"> 
      <td>{{ toplevel.period }}</td> 
      <td>{{ toplevel.uploadDate | date }}</td> 
      <td>{{ code.transferCode }}</td> 
      <td ng-repeat="detail in code.details">{{ detail.amount }}</td> 
      <td ng-repeat="detail in code.details">{{ detail.description }}</td> 
      <td ng-repeat="detail in code.details">{{ detail.amount }}</td> 
     </tr> 
     </tbody> 

    </table> 
    </div> 
</div>

來源

2016-01-13 Joshua Swiss

爲什麼不寫一個函數將這個json轉換成另一個更顯示的json ......如果你想繼續使用當前結構，你將不得不使用嵌套的ng-repeat ..第一個用於外部數組，內部細節 – harishr

如果您希望'st-search'工作或列排序，則此結構不會與智能表結合使用。你可以將它映射到一個更友好的結構，當你收到它 – charlietfl

好吧，這是一個無賴。我想我必須儘早寫出這個函數。感謝您的建議。 –

這會幫助你看到一個更好的接觸：https://jsfiddle.net/92wqs2sh/1/

的概念是相同的，我相當肯定可以更換div元素與適當的td元素，而無需太過計較。

來源

2016-01-13 19:33:40 ramoneguru

感謝您的支持。不幸的是@charlietfl是正確的;如果我想讓智能表的搜索/排序/過濾功能正常工作，我需要重構我的數據。一旦我重新構建了數據，它應該很容易放在桌子上。儘管你的解決方案運行良好 –

您可以更改：？

<td ng-repeat="detail in code.details">{{ detail.amount }}</td>

到

<td ng-repeat="detail in code.details"> 
     <span ng-repeat="amount in detail.amount">{{ amount }}</span> 
</td>

來源

2016-01-13 18:23:52 gaurav5430

在表中循環遍歷數組中的角ng-

回答

相關問題