Question

我试图在我的网站上显示一些收到的JSON数据，这里是控制器：

angular.module('web')
  .controller('runController', function($http, $scope) {
    $http.get('/#/runs')
    .success(function(data, status, headers, config){
      $scope.runs = data;
    })
    .error(function(data, status, headers, config) {
      alert(data);
   });
});

然后是我的html：

<div>
  <table>
    <thead>
      <tr><th>Runs</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="run in runs">
        <td>{{run.id}}</td>
      </tr>
    </tbody>
  </table>
</div>

最后是JSON数据：

[
  {
    "environment_id": 4, 
    "start_time": "13:11:10.781463", 
    "start_date": "2015-05-21", 
    "feature_id": 2, 
    "usecase_id": 4, 
    "id": 12
  }
]

现在，当这样做时，网站会显示以下错误：

错误：[ngRepeat：dupes]不允许在转发器中重复。使用＆＃39;跟踪＆＃39;表达式以指定唯一键。 Repeater：在运行中运行，Duplicate键：string：＆lt;，重复值：＆lt;

在我的html中添加track by $index时，我得到大约700个空<td>。

有人提到使用$scope.runs = angular.fromJson(data);反序列化控制器中的JSON数据，但会导致以下错误：

SyntaxError：意外的标记＆lt;

Answer 1

你必须使用＆＃34;跟踪＆＃34;为了解决这个问题。

 <tr ng-repeat="run in runs track by run.id">
    <td>{{run.id}}</td>
 </tr>

ngRepeat不允许数组中的重复项

如果您确实需要重复重复项目，则可以使用跟踪表达式替换默认跟踪行为。

有关详细信息，请参阅this

假设id对所有记录都是唯一的，我们可以通过＆＃34; id＆＃34;

跟踪

Answer 2

这里的问题不是关于ng-repeat本身，而是$ http。

我尝试在我的本地计算机中复制该问题，这是我观察到的，您的$ http.get（）方法无法从服务器获取JSON数据。

例如，像这样修改你的代码

angular.module('web')
 .controller('runController', function($http, $scope) {
   $http.get('/#/runs')
   .success(function(data, status, headers, config){
     console.log( data );
     $scope.runs = data;
   })
   .error(function(data, status, headers, config) {
     alert(data);
   });
});

我刚刚添加了console.log(data)，您可以看到它可能会出现404错误（这是angular.fromJson(data);给出JSON解析错误的原因）

解决方案是修复JSON的URL。如果它有效，您应该能够看到data正确登录到控制台。而且，您的代码应该在那时工作。

ng-repeat不使用JSON数据

2 个答案: