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>

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

2 个答案: