2015-12-24 58 views
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>

+0

有很多的不相关的代码在这里(例如' TODO提供标题')在你的问题上并没有太大的细节。它以什么方式不起作用?我强烈建议尝试创建一个[MCVE](http://stackoverflow.com/help/mcve),然后发布该问题,并提供具体问题以及问题的详细信息,如果您想要一个有用的答案。 – DaveyDaveDave

+0

我修复了这个片段,它似乎是工作。 –

+0

@MoshFeu Tnx ..... –

回答

0

更改此:

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