无限滚动部分使用angularjs php [英] infinite scrolling partially working with angularjs php
本文介绍了无限滚动部分使用angularjs php的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用angularjs和php进行数据库内容的无限滚动.我需要每个通话查询5条记录.问题在于angular js仅显示前五个数据，而当我向下滚动页面时无法显示其余数据.有人可以帮我解决这个问题吗?谢谢
Am trying to perform infinite scrolling of database content using angularjs and php. I need to query 5 records per call. The Problem am having is that angular js displays only the first five data but the rest data cannot be displayed as I scroll down the page. can someone help me fix that. Thanks
<!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);
?>
推荐答案
对此进行测试.您应该将 $ http insid getMoreData 放入:
test this . You should put $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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
