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

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

ただいまの
回答率

89.64%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,557

Rtaaaaabo

score 6

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

 <ion-content ng-cloak>
    <ion-list>
      <ion-item class="item-avatar-right" ng-repeat="item in items" item="item" href="#/current/{{item.page_offset}}/{{item.id}}">
        <h2>{{item.name}}</h2>
        <p>カテゴリ : {{item.category}} </p>
      </ion-item>
      <ion-infinite-scroll distance = "2%"
                           on-infinite = "loadMoreData()">
      </ion-infinite-scroll>
    </ion-list>
  </ion-content>

<!--Detail-->
<ion-view view-title="{{item.name}}">
    <ion-content class="padding">
        <p style="text-align: center;">{{item.latitude}}</p>
        <h2 style="text-align : center;">{{item.name}}</h2>
        <h3 style="text-align : center;">{{item.category}}</h3>
        <p>{{item.guide}}</p>
    </ion-content>
</ion-view>
//Factory
angular.module('myApp.service',[])
.factory('Current', function($http){
  var items = [];
  var api = 'http://api.gnavi.co.jp/RestSearchAPI/20150630/';   //レストランAPIのURL
  var keyId = 'xxxxxxxxxxxxxxxxxxxx'; //アクセスキー
  var page = 0;
  var latitude = 35.856999;
  var longitude = 139.648849;

  return {
    getShop : function(page) {
      return $http.jsonp(api, {
        params : {
          keyid : keyId,
          latitude : latitude,
          longitude : longitude,
          range : 3,
          offset_page : page,
          callback : 'JSON_CALLBACK',
          format : 'json'
        }
      }).then(function(response){
        items = response.data.rest;
        return items;
      })
    },
    get : function(currentPage, currentId) {
      for(var k=0; k<items.length; k++) {
        if(items[k].id === currentId){
          return items[k];
        }
      }
      return null;
    }
  };
})

//Controller
angular.module('myApp.controller', [])
//★★★★★★★★★CurrentCtrl★★★★★★★★★★★★
.controller('CurrentCtrl', function($scope, $cordovaGeolocation, Current){
  $scope.items = [];
  $scope.item = [];
  var page = 1;

  $scope.loadMoreData = function() {
    Current.getShop(page).then(function(items) {
      $scope.items = $scope.items.concat(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
    page ++;
  };
})
//★★★★★★★★★DetailCtrl★★★★★★★★★★★★
.controller('DetailCtrl', function($scope, $stateParams, Current){
  $scope.item = Current.get($stateParams.currentPage, $stateParams.currentId);
})

//Config
angular.module('myApp.router', [])
//画面遷移
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('scaffold', {
    abstract : true,
    templateUrl : "templates/scaffold.html"
  })

  .state('current', {
    url : '/current',
    parent : "scaffold",
    templateUrl : "templates/current.html",
    controller : 'CurrentCtrl'
  })

  .state('detail', {
    url : '/current/:currentPage/:currentId',
    parent : 'scaffold',
    templateUrl : "templates/current-detail.html",
    controller : "DetailCtrl"
  })
  $urlRouterProvider.otherwise("/current");
})
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる