AngularJS中动态JSON无法显示但硬编码可正常展示问题排查

刚接触AngularJS的时候我也踩过这个坑！核心原因其实是Angular的脏值检测机制没察觉到数据变化，导致视图没有自动更新。咱们一步步来解决：

最推荐的解决方案：用AngularJS自带的$http发请求 #

AngularJS的$http服务会自动帮你处理脏值检测，请求完成后赋值给$scope.products，视图会立刻更新。举个实际代码例子：

// 在你的控制器里注入$http服务
app.controller('ProductController', function($scope, $http) {
  // 发起请求获取产品数据
  $http.get('/你的接口地址')
    .then(function(response) {
      // 这里直接赋值，Angular会自动触发视图更新
      $scope.products = response.data;
    })
    .catch(function(error) {
      console.log('请求出错啦:', error);
    });
});

你手动复制数据赋值能生效，是因为那时候的操作是在Angular的上下文里（比如控制器初始化阶段），脏检查能捕捉到变化；但异步请求如果用了非Angular的方法（比如原生XMLHttpRequest、fetch或者jQuery的$.ajax），Angular就不知道数据已经更新了。

如果必须用其他异步方法：手动触发脏检查 #

要是你因为某些原因没法用$http，那可以用$timeout或者$scope.$apply()来手动通知Angular数据变化了。推荐用$timeout，因为它不会出现“已经在digest循环中”的报错：

用$timeout的示例： #

// 记得先在控制器里注入$timeout
app.controller('ProductController', function($scope, $timeout) {
  // 假设用原生fetch请求数据
  fetch('/你的接口地址')
    .then(res => res.json())
    .then(data => {
      // 用$timeout包裹赋值操作，让Angular感知到变化
      $timeout(function() {
        $scope.products = data;
      });
    })
    .catch(err => console.error('请求失败:', err));
});

用$scope.$apply()的示例（需额外判断）： #

app.controller('ProductController', function($scope) {
  fetch('/你的接口地址')
    .then(res => res.json())
    .then(data => {
      // 先判断是否已经在digest循环中，避免报错
      if (!$scope.$$phase) {
        $scope.$apply(function() {
          $scope.products = data;
        });
      } else {
        $scope.products = data;
      }
    });
});

额外检查点：确认返回的JSON格式是数组 #

你给出的示例数据是几个对象的拼接，要确保接口返回的是数组格式：

[{
  "NAME": "21st Amendment Blood Orange IPA",
  "ID": 327
}, {
  "NAME": "3 Daughters Blonde",
  "ID": 328
}]

如果返回的不是数组（比如单个对象或者其他格式），ng-repeat遍历的时候也会显示异常，这一步别漏了检查~

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