AngulatJS动态数据不起作用

Question

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);
    }
  };
});

Answer 1

我认为您的$scope.loadMore函数在<{strong> successCallback函数之前被称为。

从服务器获取数据后，可以调用该函数。以下代码段可能有所帮助：

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);
    }
  };
});