Angular JS在如何使用ng-repeat获取API数据中

我是新手angualr js我想使用 ng-reapet 在 td 中显示我的记录在我的获取记录下方

{"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到其记录显示

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

请给我建议

你可以像这样迭代，ng-repeat="(key, list) in documents.Root[0].Record" .如果您有多个Root，则可以嵌套重复以实现所有这些重复的相同效果。

下面是一个示例。请注意，我直接使用 {{doc}} 来创建您的 URL。

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>

试试这个，这是工作小提琴

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

相关内容

最新更新

热门标签：