私は何千もの製品があり、ng-repeatの助けを借りて配列を繰り返していますが、ブラウザではうまく動作していますが、モバイルデバイス製品では、モバイルデバイス上の製品のAngularJSのng-repeatの代替ですか?
0
A
答えて
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
関連する問題
- 1. AngularJS ngRepeat更新モデル
- 2. AngularjsでngRepeatを発行すると、
- 3. オブジェクトフィットの代替ソリューション? (AngularJS&ng-repeat)
- 4. はAngularJS ngRepeatディレクティブでコレクション名を取得
- 5. AngularJSモジュールの強制サービスインスタンス化(AngularJS実行ブロックの代替)
- 6. com.google.common.io.ByteArrayDataInputの代替ですか?
- 7. OAuthの代替ですか?
- 8. なぜorderByがangularjsのngrepeatで動作していないのですか?
- 9. AngularJS - ngRepeatを使用したドロップダウンメニュー
- 10. のNoSQL FREE代替(代替ravendbする)
- 11. コンテンツを取得できません。ngrepeat内のAngularJs動的ポップオーバー
- 12. angularjs内のrequireの使用:任意の代替
- 13. AngularJS - ngRepeatソーティングは配列の長さを変更します
- 14. ngRepeat(AngularJS)でクリックハンドラを繰り返す方法は?
- 15. .NET 3.5のGetGlobalAsaxTypeの代替ですか?
- 16. iOSのAudioContext.createMediaStreamSourceの代替ですか?
- 17. PHPのpassthru()のRuby代替ですか?
- 18. Scipyのfsolveの代替品ですか?
- 19. JDBC:Informix DBのstatement.cancel()の代替ですか?
- 20. iPhoneのMPMoviePlayerControllerの代替品ですか?
- 21. Hazelcastのオープンソースの代替品ですか?
- 22. pythonのパディングフォーマットの代替ですか?
- 23. angularJSのngrepeatの奇妙な振る舞い
- 24. ajaxリフレッシュの代替コンポーネント代替
- 25. Facebook SDK:signed_requestはaccess_codeの代替ですか?
- 26. Clickatellの代替SMSゲートウェイですか?
- 27. JqueryUIの代替品ですか?
- 28. 属性の代替は何ですか?
- 29. MEF:PRISMの代替品ですか?
- 30. SAS DI LAG1の代替品ですか?
すべてのアイテムを一度にレンダリングするのではなく、ページネーションを使用してください。たとえば、無限スクロールの実装です。 – devqon