AngularJS無限滾動不加載

Question

這是我的示例，無限滾動不起作用。 我看不出問題所在。

有什么解決辦法嗎？

 angular.module('infiniteScrollTutorial', ['infinite-scroll']) .controller('infiniteScrollController', function ($scope, $http) { $scope.users = [{ "id": 1, "first_name": "Kimberly", "last_name": "Grant", "email": "kgrant0@ebay.co.uk", "country": "Bolivia", "ip_address": "93.77.148.179" }, { "id": 2, "first_name": "Elizabeth", "last_name": "Lewis", "email": "elewis1@so-net.ne.jp", "country": "Indonesia", "ip_address": "39.187.159.25" }, { "id": 3, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 4, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 5, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 6, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 7, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 8, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 9, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 10, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 11, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 12, "first_name": "Shawn", "last_name": "Ellis", "email": "sellis2r@diigo.com", "country": "Portugal", "ip_address": "121.250.152.235" } , { "id": 13, "first_name": "111111111111111111", "last_name": "Ellis", "email": "sellis2r@diigo.com", "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> 

Answer 1

更改此：

<div ng-repeat="user in users" class="userContainer">