離子無限滾動列表

Question

如何使離子列表使用JSON網址

JSON代碼：

[{"id":"1","firstName":"John", "lastName":"Doe"}, 
{"id":"2","firstName":"Anna", "lastName":"Smith"}, 
{"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}] 

app.js

$http.get("http://localhost/app/users.php") 
.success(function (response) 
{ 
$scope.items = response; 
}); 

模板

<ion-list> 
    <ion-item ng-repeat="x in items"> 
     First name: {{x.firstName}} 
     Last name: {{x.lastName}} 
    </ion-item> 
</ion-list> 

現在我想添加離子無限滾動

這是我的第一個應用程序。

Answer 1

在創建list.json文件www floder

HTML

<ion-content class="padding"> 
    <ion-list> 
     <ion-item collection-repeat="list in _list" class="item-thumbnail-left"> 
      <p>{{list.id}}</p> 
      <p>{{list.firstName}}</p> 
      <p>{{list.lastName}}</p> 
     </ion-item> 
    </ion-list> 
    <ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%"> 
    </ion-infinite-scroll> 
</ion-content> 

控制器

.controller('listCtrl', function($scope, $http) { 

    $scope._list = []; 
    var from = 1; 
    $scope.populateList = function() { 
     populateLists(); 
    } 
    $scope.canWeLoadMoreContent = function() { 
     return ($scope._list.length > 49) ? false : true; 
    } 
    populateLists(); 

    function populateLists() { 
     $http.get('list.json').success(function(data) { 
      $scope.list = data; 
      var limit = from + 9; 
      for (var i = from; i <= limit; i++) { 
       console.log($scope.list[i]); 
       $scope._list.push({ 
        id: $scope.list[i].id, 
        firstName: $scope.list[i].firstName, 
        lastName: $scope.list[i].lastName 

       }); 
       from = i; 
      } 
      $scope.$broadcast('scroll.infiniteScrollComplete'); 
     }); 
    } 
}); 

從2

list.json

[{ 
    "id": "1", 
    "firstName": "John", 
    "lastName": "Doe" 
}, { 
    "id": "2", 
    "firstName": "Anna", 
    "lastName": "Smith" 
}, { 
    "id": "3", 
    "firstName": "Joy", 
    "lastName": "Jones" 
}, { 
    "id": "4", 
    "firstName": "Sal", 
    "lastName": "Jsdones" 
}, { 
    "id": "5", 
    "firstName": "Pedfdter", 
    "lastName": "sdfs" 
}, { 
    "id": "6", 
    "firstName": "sfsfs", 
    "lastName": "gjng" 
}, { 
    "id": "7", 
    "firstName": "fgfg", 
    "lastName": "dfgg" 
}, { 
    "id": "8", 
    "firstName": "fdfgde", 
    "lastName": "erwrw" 
}, { 
    "id": "9", 
    "firstName": "fsc", 
    "lastName": "cscfsd" 
}, { 
    "id": "10", 
    "firstName": "sdsd", 
    "lastName": "sfsf" 
}, { 
    "id": "11", 
    "firstName": "hjkyh", 
    "lastName": "dsd" 
}, { 
    "id": "12", 
    "firstName": "sdsd", 
    "lastName": "Jones" 
}, { 
    "id": "13", 
    "firstName": "ssdcsw", 
    "lastName": "szdsd" 
}, { 
    "id": "14", 
    "firstName": "sdsd", 
    "lastName": "eqwe" 
}, { 
    "id": "15", 
    "firstName": "Peter", 
    "lastName": "Jones" 
}, { 
    "id": "16", 
    "firstName": "sfsd", 
    "lastName": "Jones" 
}, { 
    "id": "17", 
    "firstName": "sdsdws", 
    "lastName": "kyhk" 
}, { 
    "id": "18", 
    "firstName": "jtj", 
    "lastName": "fhrfhrt" 
}, { 
    "id": "19", 
    "firstName": "fgryhrt", 
    "lastName": "fhrtyh" 
}, { 
    "id": "20", 
    "firstName": "fgrfg", 
    "lastName": "fgrfg" 
}, { 
    "id": "21", 
    "firstName": "fgrfgr", 
    "lastName": "fgrr" 
}, { 
    "id": "22", 
    "firstName": "qwqw", 
    "lastName": "gnbgbn" 
}] 

Answer 2

HTML

<ion-content ng-controller="MyController"> 
    <ion-list> 
    .... 
    .... 
    </ion-list> 

    <ion-infinite-scroll 
     on-infinite="loadMore()" 
     distance="1%"> 
    </ion-infinite-scroll> 
    </ion-content> 

JS

function MyController($scope, $http) { 
    $scope.items = []; 
    $scope.loadMore = function() { 
    $http.get('/more-items').success(function(items) { 
     useItems(items); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }); 
    }; 

    $scope.$on('$stateChangeSuccess', function() { 
     $scope.loadMore(); 
    }); 
    } 

一個容易的方法來阻止無限滾動一旦有沒有更多的數據加載是使用角度的ng-if指令：

HTML

<ion-infinite-scroll 
    ng-if="moreDataCanBeLoaded()" 
    icon="ion-loading-c" 
    on-infinite="loadMoreData()"> 
    </ion-infinite-scroll> 

IonicModule

.directive('ionInfiniteScroll', ['$timeout', function($timeout) { 
    return { 
    restrict: 'E', 
    require: ['?^$ionicScroll', 'ionInfiniteScroll'], 
    template: function($element, $attrs) { 
     if ($attrs.icon) return '<i class="icon {{icon()}} icon-refreshing {{scrollingType}}"></i>'; 
     return '<ion-spinner icon="{{spinner()}}"></ion-spinner>'; 
    }, 
    scope: true, 
    controller: '$ionInfiniteScroll', 
    link: function($scope, $element, $attrs, ctrls) { 
     var infiniteScrollCtrl = ctrls[1]; 
     var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0]; 
     var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative(); 

     // if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling 
     if (jsScrolling) { 
     infiniteScrollCtrl.scrollView = scrollCtrl.scrollView; 
     $scope.scrollingType = 'js-scrolling'; 
     //bind to JS scroll events 
     scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds); 
     } else { 
     // grabbing the scrollable element, to determine dimensions, and current scroll pos 
     var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll'); 
     infiniteScrollCtrl.scrollEl = scrollEl; 
     // if there's no scroll controller, and no overflow scroll div, infinite scroll wont work 
     if (!scrollEl) { 
      throw 'Infinite scroll must be used inside a scrollable div'; 
     } 
     //bind to native scroll events 
     infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds); 
     } 

     // Optionally check bounds on start after scrollView is fully rendered 
     var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true; 
     if (doImmediateCheck) { 
     $timeout(function() { infiniteScrollCtrl.checkBounds(); }); 
     } 
    } 
    }; 
}]);