2015-12-24 85 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">