Question

我试图在视图中显示$ http响应数据之前对其进行操作，但由于$ http调用是异步的，我认为$ scope变量在返回响应之前已经设置好。除了不显示数据外，服务器每次调用都会崩溃。

我正在尝试对数据/响应做的是将其拆分为四个并在视图中创建四列 - 每列包含四分之一的数据。这是需要在服务中还是以其他方式发生的事情？

非常感谢任何帮助！

<!DOCTYPE html>
<html ng-app="stylingCampersStories" ng-controller="CamperNewsController">
<head>
 <title>Camper News </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mystyles.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
  <body>

  <div ng-repeat="(key, value) in columnOne" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
    <div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
      {{value.author.username}}
    </div>
    <div class="bottomBox"></div>
  </div>

  <div ng-repeat="(key, value) in columnTwo" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
    <div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
      {{value.author.username}}
    </div>
    <div class="bottomBox"></div>
  </div>

  <div ng-repeat="(key, value) in columnThree" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
    <div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
      {{value.author.username}}
    </div>
    <div class="bottomBox"></div>
  </div>

  <div ng-repeat="(key, value) in columnFour" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
    <div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
      {{value.author.username}}
    </div>
    <div class="bottomBox"></div>
  </div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="controllers/CamperNewsController.js" type="text/javascript"></script>
</body>

angular.module("stylingCampersStories", []).controller('CamperNewsController', ['$scope','$http',
function($scope, $http) {
  $scope.columnOne = [];
  $scope.columnTwo = [];
  $scope.columnThree = [];
  $scope.columnFour = [];

  $http({
  method: 'GET',
  url: 'http://www.freecodecamp.com/news/hot'
}).then(function successCallback(response) {
    var oneQuarter = response.data.length / 4;
    var oneHalf = response.data.length / 2;
    var threeQuarters = response.data.length / 1.333;

    for(var i = 0; i < oneQuarter; i++) {
      while ( i < response.data.length / 4) {
        $scope.columnOne.push(response.data[i]);
      }
      while (i > oneQuarter && i < oneHalf) {
        $scope.columnTwo.push(response.data[i]);
      }
      while (i > oneHalf && i < threeQuarters) {
        $scope.columnThree.push(response.data[i]);
      }
      while (i > threeQuarters) {
        $scope.columnFour.push(resposne.data[i]);
      }
  }
  }, function errorCallback(response) {
    console.log(response);
  });

}]);

Answer 1

试试这个。不是直接更改范围变量，而是可以将值推送到另一个变量，并在完成所有操作后分配给范围变量。

angular.module("stylingCampersStories", []).controller('CamperNewsController', ['$scope','$http',
function($scope, $http) {
    $scope.columnOne = [];
    $scope.columnTwo = [];
    $scope.columnThree = [];
    $scope.columnFour = [];

    $http({
        method: 'GET',
        url: 'http://www.freecodecamp.com/news/hot'
    }).then(function successCallback(response) {
        var oneQuarter = response.data.length / 4,
            oneHalf = response.data.length / 2,
            threeQuarters = response.data.length / 1.333,
            col1 = [],
            col2 = [],
            col3 = [],
            col4 = [];

        for(var i = 0; i < oneQuarter; i++) {
            while ( i < response.data.length / 4) {
                col1.push(response.data[i]);
            }
            while (i > oneQuarter && i < oneHalf) {
                col2.push(response.data[i]);
            }
            while (i > oneHalf && i < threeQuarters) {
                col3.push(response.data[i]);
            }
            while (i > threeQuarters) {
                col4.push(resposne.data[i]);
            }
        }

        $scope.columnOne = col1;
        $scope.columnTwo = col2;
        $scope.columnThree = col3;
        $scope.columnFour = col4;           
    }, function errorCallback(response) {
        console.log(response);
    });
}]);

在视图中显示之前处理Angular.js $ http响应

1 个答案: