无限滚动部分使用angularjs php_Php_Angularjs

无限滚动部分使用angularjs php

php angularjs

无限滚动部分使用angularjs php,php,angularjs,Php,Angularjs,我试图使用angularjs和php执行数据库内容的无限滚动。每次通话我需要查询5条记录。我遇到的问题是angular js只显示前五个数据，但当我向下滚动页面时，其余数据无法显示。有人能帮我修一下吗。谢谢 <!doctype html> <html> <head> <script src="jquery.min.js"></script> <script src="angular.min.js">&

我试图使用angularjs和php执行数据库内容的无限滚动。每次通话我需要查询5条记录。我遇到的问题是angular 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>


.userContainer{
宽度：500px；
高度：150像素；
背景#f9f9f9；
填充物：5px；
字体系列：verdana；
边缘底部：7px；
盒影：0px 0px 2px 1px；
}
.userContainer p{
字体大小：12px；
}
{{user.id}
{{user.title}}
{{user.title}}
var fetch=angular.module（'myapp'，['infinite-scroll']）；
fetch.controller（'userCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.row=0；
$scope.rowperpage=5；
$http({
方法：“post”，
url:'request22.php'，
数据：{请求：1，行：$scope.row，rowperpage:$scope.rowperpage}
}).then（函数成功回调（响应）{
$scope.posts22=response.data；
$scope.data=$scope.posts22；
//$scope.data=$scope.posts22.slice（0,7）；
$scope.getMoreData=函数（）{
//$scope.data=$scope.posts22.slice（0，$scope.data.length+5）；
//$scope.data=$scope.posts22；
}
});
}]);

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


?>

测试这个。你应该把‍‍<代码>$httpinsin

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;

        });
    }

}]);


var fetch=angular.module（'myapp'，['infinite-scroll']）；
fetch.controller（'userCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.row=0；
$scope.rowperpage=5；
$scope.getMoreData=函数（）{
$http({
方法：“post”，
url:'request22.php'，
数据：{请求：1，行：$scope.row，rowperpage:$scope.rowperpage}
}).then（函数成功回调（响应）
{
$scope.posts22=response.data；
$scope.row=$scope.row+5；
$scope.data=$scope.posts22；
});
}
}]);

我认为您总是将

行的值传递给0，而它应该是0、5、10和..@Alihosseinshahahabi，您可以用示例代码来说明这一点吗？例如，在这一行“$scope.post22=response.dara”之后添加“$scope.row=$scope.row+5；”然后测试againIt滚动到10行，当我进一步尝试向下滚动页面时，所有内容都消失了。同样，最后五条记录将替换以前显示的记录