Question

尝试使用angularjs和php执行无限滚动数据库内容。我需要每次调用查询5条记录。我遇到的问题是，角度js仅显示前五个数据，但当我向下滚动页面时，其余数据无法显示。有人可以帮我解决这个问题。感谢

<!doctype html>
<html>
    <head>
<script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <style>
            .userContainer{
                width:500px;
                height:150px;
                background: #f9f9f9;
                padding: 5px;
                font-family: verdana;
                margin-bottom: 7px;
                box-shadow: 0px 0px 2px 1px;
            }
            .userContainer p{
                font-size: 12px;
            }
        </style>


    </head>
    <body ng-app='myapp'>

        <div ng-controller="userCtrl">



<script src="ng-infinite-scroll.min.js"></script>
                <div infinite-scroll="getMoreData()">
                <div ng-repeat="user in data"  class="userContainer">
               <td>{{user.id}}</td>
                <td>{{user.title}}</td>
                <td>{{user.title}}</td>
                </div>
</div>



        </div>
<script>
        var fetch = angular.module('myapp', ['infinite-scroll']);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.row = 0;
$scope.rowperpage = 5;

            $http({
            method: 'post',
            url: 'request22.php',
data: {request: 1,row:$scope.row,rowperpage:$scope.rowperpage}
            }).then(function successCallback(response) {
                $scope.posts22 = response.data;

$scope.data = $scope.posts22;
//$scope.data = $scope.posts22.slice(0, 7);
$scope.getMoreData = function () {
    //$scope.data = $scope.posts22.slice(0, $scope.data.length + 5);

 //$scope.data = $scope.posts22;
}

            });

        }]);
        </script>




    </body>

</html>

request.php

<?php

$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "angularjs";

$data = json_decode(file_get_contents("php://input"));
$request = $data->request;
$userid = 5;

$row = $data->row;
$rowperpage = $data->rowperpage;


$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = 'SELECT * FROM post22 limit '.$row.','.$rowperpage;
//$query = "SELECT * from post22 ORDER BY id";
$result = mysqli_query($con, $query);
$res = array();
while($resultSet = mysqli_fetch_assoc($result)) {
 $res[] = array("id"=>$resultSet['id'],"title"=>$resultSet['title']);
}
echo json_encode($res);


?>

Answer 1

测试一下。你应该$http insid getMoreData：

<script>
var fetch = angular.module('myapp', ['infinite-scroll']);
fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.row = 0;
    $scope.rowperpage = 5;
    $scope.getMoreData = function () {


        $http({
            method: 'post',
            url: 'request22.php',
            data: {request: 1,row:$scope.row,rowperpage:$scope.rowperpage}
        }).then(function successCallback(response)
        {
            $scope.posts22 = response.data;
            $scope.row=$scope.row+5;
            $scope.data = $scope.posts22;

        });
    }

}]);

无限滚动部分使用angularjs php

1 个答案: