无法在视图 ng-repeat 中反映 $http 响应

Question

我已经看到了与此相关的其他问题，并根据我的理解实施了答案。但是，我无法使用 ng-repeat 在视图中显示响应。这是我的代码。

JS 文件：

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http.get('http://localhost:3000/testdata').then(function(data) {
      $scope.resultset = data.data.resultset;
      console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
}]);

HTML：

<div class="wrapper-md" ng-controller="testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>

我可以在控制台中看到数据。但是，我无法在视图中看到这种情况。我不明白为什么不。我正在使用 promise 并初始化变量，这样 ng-repeat 就不会阻塞。

控制台响应：

[Object, Object, Object, Object, Object]
0: Object
avatar: "img/a4.jpg"
followers: "2104"
name: "Chris Fox"
title: "Master Chef"
url: "#"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]

Answer 1

这是由于范围问题。在 Angular 中，您不能直接交换对象或数组。

要使其工作，请使用angular.copy：

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http
      .get('http://localhost:3000/testdata')
      .then(function(data) {
        angular.copy(data.data.resultset, $scope.resultset); // HERE
        console.log($scope.resultset);
      }, function(error) {
        $scope.error = error;
      });
}]);

更新

我终于找到了the documentation。它有点冗长，但对于理解 AngularJS 1.x 来说是必不可少的。我建议从上到下阅读文档:)

Answer 2

在作用域函数或私有函数中使用您的分配或操作。因此，这将帮助您仅在需要时调用该方法，并且您可以重复使用相同的方法。

注意：确保您获取的是数组结果中的数据。

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $scope.GetData =function(){
       $http.get('http://localhost:3000/testdata').then(function(data) {
          $scope.resultset = data.data.resultset;
          console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
    }

    $scope.init=function(){
        $scope.GetData();
    }
}]);

HTML：

<div class="wrapper-md" ng-init="init()" ng-controller="testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>