AngularJS中如何将JSON文件数据加载到表格？

开发者阿泽

2026-5-19

嘿，我来帮你理清楚AngularJS里加载JSON数据填充表格的正确玩法，顺便说说你之前用jQuery踩的坑～

AngularJS加载JSON填充表格的标准姿势

首先得说，AngularJS本身就自带了处理HTTP请求的工具，完全没必要依赖jQuery的getJSON，而且混着用还容易和Angular的消化周期（digest cycle）冲突，这估计就是你之前失败的原因啦。

一步步实现的正确流程

第一步：用Angular的$http服务拿数据
在控制器里注入$http，用它请求本地的file.json，拿到数据后绑定到作用域上：

angular.module('myFirstApp', [])
  .controller('TableCtrl', function($scope, $http) {
    // 请求JSON文件
    $http.get('file.json')
      .then(function(res) {
        // 把数据交给视图用
        $scope.tableItems = res.data;
      })
      .catch(function(err) {
        // 万一加载失败，打个日志排查
        console.error('JSON加载出错啦:', err);
      });
  });

第二步：用ng-repeat渲染表格
在HTML里用Angular的ng-repeat指令循环生成表格行，把数据填进去：

<div ng-app="myFirstApp" ng-controller="TableCtrl">
  <table border="1">
    <thead>
      <tr>
        <!-- 这里的表头要对应你JSON里的字段，比如我假设是name和email -->
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环每一条数据生成行 -->
      <tr ng-repeat="item in tableItems">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </tbody>
  </table>
</div>

为啥之前用jQuery的`getJSON`不行？

如果你之前直接用jQuery拉数据后给$scope赋值，大概率是因为jQuery的异步操作没触发Angular的消化周期，导致视图根本不知道数据更新了。就算手动调用$scope.$apply()能临时解决，但这绝对不是Angular推荐的做法——毕竟Angular自己的$http会自动帮你处理视图更新的事儿。