データベースからの動的データ(Httpリクエスト)を使用してイオン1と角度js 1で無限スクロールを実行するにはどうすればよいですか?イオン1と角度jsを持つ動的データの無限スクロール1
-1
A
答えて
1
HTML:
<ion-view view-title="Playlists">
<ion-content>
<ion-list>
<ion-item class="item-avatar" ng-repeat="item in items">
<h2>{{item.name}} -{{item.id}}</h2>
<p>{{item.iso_code_2}} {{item.iso_code_3}}</p>
</ion-item>
</ion-list>
<div ng-if="hasData">
<ion-infinite-scroll on-infinite="loadMore()" distance="5%">
</ion-infinite-scroll>
</div>
</ion-content>
</ion-view>
Controller.js
これは私のangularjsコントローラです。サーバーデータを取得するためにhttp呼び出しを行っている 'CountryService'という名前のファクトリを使用します。 formdata = {limit:serviceconfig.showlimit、page:page}にあります。私はconfig.jsサービスで設定したlimit = 10を送って、最初にpage = 1に設定しました。
GetLoadMoreがスクロールされた後に初めてGetDefaultが呼び出されると、次の10個の新しいデータでpage = 2とlimit = 10で呼び出されます。
angular.module('starter.usercontroller', [])
.controller('UserCtrl', function($scope, CountryService, $ionicModal,
$timeout, $http, serviceconfig, $ionicPopup,$state, ionicDatePicker, $filter) {
$scope.hasData=1; // If data found
$scope.items = [];
CountryService.GetDefault().then(function(items){
$scope.items = items;
});
$scope.loadMore = function() {
CountryService.GetLoadMore().then(function(items){
$scope.items = $scope.items.concat(items);
if(items.length>0)
{
$scope.$broadcast('scroll.infiniteScrollComplete'); // If has data then load more
}
else
{
$scope.hasData=0; // If no more data to load
}
});
};
})
.factory('CountryService',
['$http','serviceconfig',function($http,serviceconfig){
var items = [];
var page =1;
var formdata = {limit:serviceconfig.showlimit,page:page};
return {
GetDefault: function(){
formdata = {limit:serviceconfig.showlimit,page:page};
return $http.post(serviceconfig.serviceUrl+ "all-countries",formdata).then(function(response){
if(response.data.status==1)
{
items = response.data.countries;
}
else
{
items =[];
}
return items;
});
},
GetLoadMore: function(){
formdata = {limit:serviceconfig.showlimit,page:page};
return $http.post(serviceconfig.serviceUrl+ "all-countries",formdata).then(function(response){
page = page+1;
if(response.data.status==1)
{
items = response.data.countries;
}
else
{
items =[];
}
return items;
});
}
}
}]);
このconfig.jsので設定
についてはconfig.jsの私は、サーバーから各スクロールを取得したいどのように多くのデータ、サーバーのURLと上限を設定します。 'configService'サービス私はjsコントローラに注入します。
angular.module('starter.configService', [])
.service('serviceconfig',function(){
this.serviceUrl='http://192.168.1.116/ionicserver/service/';
this.showlimit=10;
})
PHP ServerサイトCODE:
私はPHPのlaravel 5.1を使用しています。これは、私のPHPコントローラの機能を下に郡リストを取得するためです
public function postAllCountries() // Countries
{
$data = Request::all();
$limit= $data['limit'];
$page = $data['page'];
$offset = ($page - 1) * $limit;
$countries = Country::where('id','>',0)->take($limit)->skip($offset);
$countries = $countries->get()->toArray();
if(!empty($countries))
{
echo json_encode(array('status'=>1,'msg'=>'Successfully Registered','countries'=>$countries));
}
else
{
echo json_encode(array('status'=>0,'msg'=>'No data found'));
}
exit;
}
関連する問題
- 1. 単純な1ページ無限のスクロール角度js
- 2. イオン無限スクロール
- 3. 角度1 jsとmaterialize css
- 4. 角度1.xおよびイオン性1.xで/角度2ベータ10
- 5. 無限スクロール距離 - 角度2
- 6. React - 無限スクロール - 動的高さを持つ子要素
- 7. 角度負荷の無限スクロールx各ユーザーのデータ量下からスクロール
- 8. イオンでの無限のスクロール2
- 9. イオンFrameworkの角度JS内部HTML
- 10. React JSでの無限スクロール
- 11. 角度js 1、Routing、locationProvider、404エラー
- 12. 動的データを1つずつ
- 13. 角度jsのチャートにデータを動的に追加
- 14. uirouterを持つ角度jsブートストラップタブ
- 15. アラート$ scope.dataはイオンと角度で動的に
- 16. ディレクティブテンプレートの動的ui-sref角度Js
- 17. 角度のあるリモートサーバから無限のスクロール
- 18. 1つの丸い角を持つUIButton
- 19. 、角度1
- 20. RecyclerView一度に1行ずつスクロール
- 21. 角度js動的div作成
- 22. 2列(1静的および1動的) - 動的列のスクロール方法
- 23. スクロール位置を保持する角度js
- 24. 角度$ httpステータス(-1)
- 25. イオンGUIとコーダjs、角度jsを使用してPhoneGap cordovaアプリケーションを構築
- 26. EFで動的Linqと1対多の関係を持つOrderBy
- 27. どのように角度角度2のpolyfils角度RC.1?
- 28. 無限スクロールjs:ローカルホストされたロードgif
- 29. Seaborn、1列に1つのデータを持つバイオリンプロット
- 30. 角度1〜3のコントローラー
あなたはこのリンクをチェックしましたか? http://ionicframework.com/docs/v1/api/directive/ionInfiniteScroll/ –