AngularJS ng-repeat未显示数据排查：后端基于Laravel

嘿，我明白你现在的困扰——明明console里能看到后端返回的数据，可ng-repeat就是不渲染，这事儿我之前踩过坑，先给你梳理下最可能的问题和解决办法：

1. DOM结构不合法（最可能的原因） #

你代码里的<tr>直接放在了<div>标签里，这是不符合HTML规范的！浏览器会自动修正这种错误的DOM结构，把<tr>移到<div>外面，导致ng-repeat所在的元素脱离了myCtrl控制器的作用域，自然就没法渲染数据了。

解决方法：把表格元素放在合法的容器里，也就是用<table>包裹，里面加上<tbody>（虽然浏览器会自动补，但明确写出来更规范）：

<!DOCTYPE html> 
<html ng-app="myApp"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
<body> 
<div ng-controller="myCtrl">
  <!-- 这里加上table和tbody容器 -->
  <table>
    <tbody>
      <tr ng-repeat="t in teste">
        <td>{{t.id}}</td>
        <td>{{t.total}}</td>
      </tr>
    </tbody>
  </table>
</div> 
<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
  $http.get("//localhost:8000/angular") 
  .then(function(response) { 
    $scope.teste = response.data; 
    console.log($scope.teste); 
  }); 
}); 
</script> 
</body> 
</html>

2. 确认Laravel返回的数据格式 #

虽然你说console里数据正常，但还是要确认下Laravel后端返回的是数组类型的JSON，而不是嵌套的对象。比如Laravel控制器里应该这样返回：

// 假设$teste是你的数据集（比如Eloquent集合）
return response()->json($teste);

如果后端是这样返回的：

return response()->json(['data' => $teste]);

那你在Angular里就得改成$scope.teste = response.data.data;才能拿到正确的数组。

3. 其他小排查点 #

• 检查拼写：确认teste在ng-repeat和控制器里的拼写完全一致（你代码里是对的，但还是提一下）；
• 检查控制台报错：打开浏览器开发者工具的Console面板，看看有没有Angular相关的错误提示，比如作用域问题或者数据解析错误。

先试试第一个方法，把DOM结构修正，大概率就能解决问题了！

内容的提问来源于stack exchange，提问作者Diego Marcelo