ng-repeat不包含HTML模板中JSON对象的数据

Question

我试图使用angularjs ng-repeat元素将json渲染为HTML模板中的表。脚本文件传递JSON对象，但ng-repeat不会呈现JSON的内容。

我按照本教程链接中的步骤操作。

https://codepen.io/salva341/pen/aYKmvG

html模板部分，其中ng-repeat无法正确呈现

<div ng-controller="WorkflowShowCntrl">
   <table class="table striped">
     <thead>
        <th>Job Name</th>
        <th>Job Id</th>
        <th>Start Time</th>
        <th>Status</th>
      </thead>
      <tbody>
         <tr  ng-repeat="ttm in records.response" >
            <td>{{ttm.name}} </td>
            <td>{{ttm.status}} </td>
            <td>{{ttm.name}} </td>
            <td>{{ttm.name}} </td>
         </tr>
      </tbody>
   </table> 
</div>

app.js angularjs 1.6.6

$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
    $scope.records = {"response":response.data}
    $scope.parseItem = function(string)
    {
        var newString = string.replace(/['\']/g,'');
        var jsonFormated = JSON.parse(newString);
        return jsonFormated.Message;
    }
});

谷歌浏览器检查员：部分检查截图我使用了一个angularjs附加检查器进行chrome。

Answer 1

看起来ttm是您要显示的数组。所以我相信你的ng-repeat应该更像：

    <tr  ng-repeat="record in ttm" >
        <td>{{record.name}} </td>
    <td>{{record.status}} </td>
    <td>{{record.name}} </td>
    <td>{{record.name}} </td>

ttm是数组，记录是该数组中每个项目的虚构名称。

见：https://www.w3schools.com/angular/ng_ng-repeat.asp

Answer 2

根据您的代码，您在HTML绑定中引用了错误的数组名称。

试试这个

<div ng-controller="WorkflowShowCntrl">
   <table class="table striped">
     <thead>
        <th>Job Name</th>
        <th>Job Id</th>
        <th>Start Time</th>
        <th>Status</th>
      </thead>
      <tbody>
         <tr  ng-repeat="item in records.response.ttm" >
            <td>{{item.name}} </td>
            <td>{{item.status}} </td>
            <td>{{item.name}} </td>
            <td>{{item.name}} </td>
         </tr>
      </tbody>
   </table> 
</div>

Answer 3

最后，我能够实现我想要的。

我添加了ng-bind元素来显示html模板上的数据。这很奇怪。如果没有ng-bind元素，则不会在html模板上显示范围变量。这种调查很奇怪，这种情况正在发生。

我要感谢@Thaier Alkhateeb的宝贵意见。

修改后的代码段

<tbody ng-repeat="data in records.response ">
  <tr  ng-repeat="ttm in data">
    <td ng-bind="ttm.name"> </td>
    <td ng-bind="ttm.appId"> </td>
    <td ng-bind="ttm.created"> </td>
    <td ng-bind="ttm.status"> </td>
  </tr>
</tbody>