AngularJS动态数据不起作用答案

【问题标题】：AngulatJS Dynamic data not workingAngularJS动态数据不起作用
【发布时间】：2018-03-10 21:39:12
【问题描述】：

HTML

这是我编写的 html 文件，我用产品图片详细信息重复第 3 列

<div ng-app='myApp' ng-controller='myController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <div ng-repeat="user in users">
      <div class="col-md-3">
        <div class="panel panel-default text-center">
          <img src="../backend/uploads/{{user.image}}" width="200px" height="300px">
          <p>{{user.name}}</p>
          <span><strong>&#8377;{{user.price}}</strong></span>
        </div>
      </div>
    </div>
  </div>
</div>

JS 我从 php 文件中获取数据，但它变成了无限循环

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('myController', function($scope, $http) {

 //get data from php file

  $http({
    method: 'get',
    url: 'fetch_scroll.php'
    }).then(function successCallback(response) {
        $scope.users = response.data;
        console.log($scope.users);
  });
   //function to load products

  $scope.loadMore = function() {
    var length = $scope.users.length;
    var last = $scope.users[length - 1];
    for(var i = 1; i <= length; i++) {
      $scope.users.push(last + i);
    }
  };
});

【问题讨论】：

控制台错误？
没有错误，我收到了对象格式的数据。它包含名称、图像和价格
我出错了，$scope.users 在 loadMore 函数中未定义
去掉无限滚动，隔离问题。可能存在问题。

标签： javascript php jquery angularjs

【解决方案1】：

我认为您的$scope.loadMore 函数在successCallback 函数之前被调用。

您可以在从服务器获取数据后调用该函数。下面的代码 sn-p 可能会有所帮助：

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('myController', function($scope, $http) {

 //get data from php file

  $http({
    method: 'get',
    url: 'fetch_scroll.php'
    }).then(function successCallback(response) {
        $scope.users = response.data;
        console.log($scope.users);

        // Added this inside the successCallback
        $scope.loadMore();
  });
   //function to load products

  $scope.loadMore = function() {
    var length = $scope.users.length;
    var last = $scope.users[length - 1];
    for(var i = 1; i <= length; i++) {
      $scope.users.push(last + i);
    }
  };
});

【讨论】：