2017-01-10 9 views
0

私は何千もの製品があり、ng-repeatの助けを借りて配列を繰り返していますが、ブラウザではうまく動作していますが、モバイルデバイス製品では、モバイルデバイス上の製品のAngularJSのng-repeatの代替ですか?

+0

すべてのアイテムを一度にレンダリングするのではなく、ページネーションを使用してください。たとえば、無限スクロールの実装です。 – devqon

答えて

0

lazy-loadコンセプトを使用する必要があります。私はscrollを意味するか、任意のボタンをクリックすると、いくつかの行のデータを読み込ませます。 API呼び出しを使用して、最初のAPIコールで

、負荷20行、再び20 + 20:については

は利用できるようモジュールがたくさんあります。

は、いくつかのライブの例

ngInfiniteScrollを参照するか、あなた自身を作成することができます。

+0

私はAngularJSで初心者です。スクロールバーでAPIを呼び出す方法がわからないので、私に提案をお願いします。 – Kapil707

0
.controller('NoticeCtrl', function($scope, $stateParams, $state, $http, NoticeService, baseUrl) { 

    $scope.items = []; 

NoticeService.loadNotice().then(function(items) { 
if(items != 0) 
{ 
    $scope.items = items; 
} else { 
    $scope.noMoreItemsAvailable = true; 
}  
}); 

$scope.noMoreItemsAvailable = false; 
$scope.numberOfItemsToDisplay = 5; 
$scope.limit = 0; 

$scope.loadMore = function(limit) { 
var start; 
var limit; 
var j; 

for(var i= limit, j=0; j < $scope.numberOfItemsToDisplay; i++,j++) 
{ 
    start = i+ 0; 
    limit = $scope.numberOfItemsToDisplay; 
} 

$scope.limit = $scope.limit + $scope.numberOfItemsToDisplay; 
NoticeService.refreshNotice(start, limit).then(function(items){ 
    if(items != 0) 
    { 
    $scope.items = $scope.items.concat(items); 
    } else { 
    $scope.noMoreItemsAvailable = true; 
    } 

    $scope.$broadcast('scroll.infiniteScrollComplete'); 
}); 
    }; 

}) 

工場コード

.factory('NoticeService', function($http , $stateParams, baseUrl){ 
    var BASE_URL = baseUrl+"api_method=notice.list&api_version=1.0&app_key=12345&user_id="+$stateParams.userId 
    var items = []; 

    return { 
    loadNotice: function(){ 
    var start = 0; 
    var limit = 4; 
    return $http.get(BASE_URL+"&start="+start+"&limit="+limit).then(function(response){ 
    items = response.data.responseMsg; 
    return items; 
    }); 
}, 
refreshNotice: function(starts, limits){ 
    return $http.get(BASE_URL+"&start="+starts+"&limit="+limits).then(function(response){ 
    items = response.data.responseMsg; 
    return items; 
     }); 
    } 
    } 
    }) 

あなたのHTML部分

<ion-item class="content double-padding" style="white-space: normal;" ng-repeat="item in items"> 
    <div class="text-right">{{item.createdAt}}</div> 
    <h2>{{item.title}}</h2> 
    {{item.content}} 
</ion-item> 

<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore(limit)" distance="5%"></ion-infinite-scroll> 

私はこの意志を願っています助けてください:-)

+0

このコードを試していただきありがとうございます。 – Kapil707

関連する問題