角JS如何使用NG-重複用於獲取API數據

我在angualr js是新的，我想在td 下面我獲取記錄角JS如何使用NG-重複用於獲取API數據

{"Root":[{"Record":["documents.php","OSHA_lockout_regulation.pdf","LOTO_Matrix_2016.docx","LOTO_Log_2016.pdf","Sample_LOTO_policy.pdf","iLockitOut_Help.pdf","Employee_Training.pdf"]}]}

如何使用ng-reapet其使用ng-reapet我獲取記錄顯示記錄顯示

<tr ng-repeat="(key, list) in documentdetails"> 
    <td> 
     <a class="link" target="_blank" href="../admin/views/documents/{{list.Record[1]}}">{{ list }}</a> 
    </td> 
    </tr>

請給建議，我

來源

2017-04-12 Janak vyas

能否請您格式化您的JSON響應？ – kishor10d

使用清單[關鍵] .Record [1] –

您可以像這樣迭代，ng-repeat="(key, list) in documents.Root[0].Record"。如果您有多個Root s，則可以使用嵌套重複來實現所有這些重複。

下面是一個例子。通知我直接使用{{doc}}來創建您的網址。

angular.module("myApp", []) 
 
    .controller("ctrl", function($scope) { 
 
    $scope.documents = { 
 
     "Root": [{ 
 
     "Record": [ 
 
      "documents.php", 
 
      "OSHA_lockout_regulation.pdf", 
 
      "LOTO_Matrix_2016.docx", 
 
      "LOTO_Log_2016.pdf", 
 
      "Sample_LOTO_policy.pdf", 
 
      "iLockitOut_Help.pdf", 
 
      "Employee_Training.pdf" 
 
     ] 
 
     }] 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="ctrl"> 
 
    <table> 
 
    <tr ng-repeat="(key, doc) in documents.Root[0].Record"> 
 
     <td> 
 
     <a class="link" target="_blank" href="../admin/views/documents/{{doc}}">{{ doc }}</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

來源

2017-04-12 05:14:29 tanmay

非常感謝，我的工作 –

@Janakvyas請將答案標記爲已接受 – tanmay

試試這個，Here正在撥弄

<tr ng-repeat="(key, document) in documentdetails.Root[0].Record"> 
    <td> 
    <a class="link" target="_blank" href="../admin/views/documents/{{document}}"> 
    {{ document }} 
    </a> 
    </td> 
</tr>

該控制器的代碼

$scope.documentdetails = { 
    "Root":[ 
    { 
    "Record":[ 
     "documents.php", 
     "OSHA_lockout_regulation.pdf", 
     "LOTO_Matrix_2016.docx", 
     "LOTO_Log_2016.pdf", 
     "Sample_LOTO_policy.pdf", 
     "iLockitOut_Help.pdf", 
     "Employee_Training.pdf" 
     ] 
    } 
    ] 
};

來源

2017-04-12 06:07:29

角JS如何使用NG-重複用於獲取API數據

回答

相關問題