AngularJS动态数据不起作用

Posted 2023-05-09

【中文标题】AngularJS动态数据不起作用

【英文标题】：AngulatJS Dynamic data not working

【发布时间】：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"  >
          <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 函数中未定义

去掉无限滚动，隔离问题。可能存在问题。

【参考方案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);
    
  ;
);