0
這是我的例子,無限滾動不起作用。我看不出問題在哪裏。AngularJS無限滾動不加載
任何解決方案?
angular.module('infiniteScrollTutorial', ['infinite-scroll'])
.controller('infiniteScrollController', function ($scope, $http) {
$scope.users =
[{
"id": 1,
"first_name": "Kimberly",
"last_name": "Grant",
"email": "[email protected]",
"country": "Bolivia",
"ip_address": "93.77.148.179"
}, {
"id": 2,
"first_name": "Elizabeth",
"last_name": "Lewis",
"email": "[email protected]",
"country": "Indonesia",
"ip_address": "39.187.159.25"
},
{
"id": 3,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 4,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 5,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 6,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 7,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 8,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 9,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 10,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 11,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 12,
"first_name": "Shawn",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
,
{
"id": 13,
"first_name": "111111111111111111",
"last_name": "Ellis",
"email": "[email protected]",
"country": "Portugal",
"ip_address": "121.250.152.235"
}
];
$scope.data = $scope.users.slice(0, 3);
$scope.getMoreData = function() {
$scope.data = $scope.users.slice(0, $scope.data.length + 2);
}
});
.userContainer {
width: 500px;
height: 410px;
background: #f9f9f9;
padding: 5px;
font-family: verdana;
margin-bottom: 7px;
box-shadow: 0px 0px 2px 1px;
}
.userContainer p {
font-size: 12px;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.1/ng-infinite-scroll.min.js"></script>
<div ng-app="infiniteScrollTutorial" ng-controller="infiniteScrollController">
<div infinite-scroll="getMoreData()">
<div ng-repeat="user in data" class="userContainer">
<h4>{{user.first_name}} {{user.last_name}}</h4>
<p>
<b>Email:</b> {{user.email}} -
<b>Country:</b> {{user.country}} -
<b>IP:</b> {{user.ip_address}}
</p>
</div>
</div>
</div>
有很多的不相關的代碼在這裏(例如'
我修復了這個片段,它似乎是工作。 –
@MoshFeu Tnx ..... –