質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

0回答

2568閲覧

AngularJSのinfinite-scrollを使用し、一覧から詳細画面に遷移したい

Rtaaaaabo

総合スコア8

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/12/26 11:02

AngularJSのinfinite-scrollを使用して、一覧を表示しクリックを押したら詳細画面に遷移するようにしたいです。
しかし次の10件を表示したらpage_offsetが変わってしまい、前の10件分の詳細情報が消えてしまいます。

HTML

1 <ion-content ng-cloak> 2 <ion-list> 3 <ion-item class="item-avatar-right" ng-repeat="item in items" item="item" href="#/current/{{item.page_offset}}/{{item.id}}"> 4 <h2>{{item.name}}</h2> 5 <p>カテゴリ : {{item.category}} </p> 6 </ion-item> 7 <ion-infinite-scroll distance = "2%" 8 on-infinite = "loadMoreData()"> 9 </ion-infinite-scroll> 10 </ion-list> 11 </ion-content> 12 13<!--Detail--> 14<ion-view view-title="{{item.name}}"> 15 <ion-content class="padding"> 16 <p style="text-align: center;">{{item.latitude}}</p> 17 <h2 style="text-align : center;">{{item.name}}</h2> 18 <h3 style="text-align : center;">{{item.category}}</h3> 19 <p>{{item.guide}}</p> 20 </ion-content> 21</ion-view>

AngularJS(ionic)

1//Factory 2angular.module('myApp.service',[]) 3.factory('Current', function($http){ 4 var items = []; 5 var api = 'http://api.gnavi.co.jp/RestSearchAPI/20150630/'; //レストランAPIのURL 6 var keyId = 'xxxxxxxxxxxxxxxxxxxx'; //アクセスキー 7 var page = 0; 8 var latitude = 35.856999; 9 var longitude = 139.648849; 10 11 return { 12 getShop : function(page) { 13 return $http.jsonp(api, { 14 params : { 15 keyid : keyId, 16 latitude : latitude, 17 longitude : longitude, 18 range : 3, 19 offset_page : page, 20 callback : 'JSON_CALLBACK', 21 format : 'json' 22 } 23 }).then(function(response){ 24 items = response.data.rest; 25 return items; 26 }) 27 }, 28 get : function(currentPage, currentId) { 29 for(var k=0; k<items.length; k++) { 30 if(items[k].id === currentId){ 31 return items[k]; 32 } 33 } 34 return null; 35 } 36 }; 37}) 38 39//Controller 40angular.module('myApp.controller', []) 41//★★★★★★★★★CurrentCtrl★★★★★★★★★★★★ 42.controller('CurrentCtrl', function($scope, $cordovaGeolocation, Current){ 43 $scope.items = []; 44 $scope.item = []; 45 var page = 1; 46 47 $scope.loadMoreData = function() { 48 Current.getShop(page).then(function(items) { 49 $scope.items = $scope.items.concat(items); 50 $scope.$broadcast('scroll.infiniteScrollComplete'); 51 }); 52 page ++; 53 }; 54}) 55//★★★★★★★★★DetailCtrl★★★★★★★★★★★★ 56.controller('DetailCtrl', function($scope, $stateParams, Current){ 57 $scope.item = Current.get($stateParams.currentPage, $stateParams.currentId); 58}) 59 60//Config 61angular.module('myApp.router', []) 62//画面遷移 63.config(function($stateProvider, $urlRouterProvider) { 64 $stateProvider 65 .state('scaffold', { 66 abstract : true, 67 templateUrl : "templates/scaffold.html" 68 }) 69 70 .state('current', { 71 url : '/current', 72 parent : "scaffold", 73 templateUrl : "templates/current.html", 74 controller : 'CurrentCtrl' 75 }) 76 77 .state('detail', { 78 url : '/current/:currentPage/:currentId', 79 parent : 'scaffold', 80 templateUrl : "templates/current-detail.html", 81 controller : "DetailCtrl" 82 }) 83 $urlRouterProvider.otherwise("/current"); 84})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問