如何從JSON獲取一組數據點擊下一個和上一個按鈕

Question

我正在Angular和Ionic的幫助下開發Hybrid移動應用程序。 這是我得到的樣本數據：

$scope.data = [{ 
     "PID": 108, 
     "Name": "Demo", 
     "TID": 20, 
     "date": "2016/00/29" 
    }, { 
     "PID": 98, 
     "Name": "Sports Demo1", 
     "TID": 20, 
     "date": "2016/06/02" 
    }, { 
     "PID": 98, 
     "Name": "Sports Demo2", 
     "TID": 20, 
     "date": "2016/06/02" 
    }, { 
     "PID": 98, 
     "Name": "Sports Demo3", 
     "TID": 20, 
     "date": "2016/06/02" 
    }, { 
     "PID": 98, 
     "Name": "Sports Demo4", 
     "TID": 20, 
     "date": "2016/06/02" 
    }] 

第一頁HTML：

<ion-content class="" padding="true"> 
     <ul ng-repeat="dataSch in data"> 
      <li class="item" style="border-width: 0px;"> 
       <div class="item" style="border-width: 0px; padding : 1px;">{{dataSch.Name}}</div> 
       <div class="item" style="border-width: 0px; padding : 1px;">{{dataSch.date}}</div> 
      </li> 
     </ul> 
</ion-content> 

第2頁HTML：

<ion-content class="" padding="true"> 
     <div>Detail 1</div> 
     <div>Detail 2</div> 
</ion-content> 
<ion-footer-bar align-title="left" class="bar-assertive"> 
    <button ng-click="next()">Next</button> 
    <button ng-click="previous()">Previous</button> 
</ion-footer-bar> 

在首頁點擊 「禮」 的基礎上「PID」我打開第二頁的所有細節。 但在第二頁頁腳有選項移動到從那裏的下一個和以前的數據本身。 如何獲取下一個或上一個數據以顯示在第二頁上。

例如：我點擊第一頁的第二個元素，第二頁的數據名爲「Sports Demo1」。 但是，一旦我點擊下一步按鈕數據應該是「體育演示2」或點擊上一步按鈕數據應該是「演示」。

Answer 1

HTML : 
<a ng-click="openDetails(passing_only_selected_data);">Open Data</a> 
<div> 
    <h4 >{{allData.Name}}</h4> 
    <h4 >{{allData.Name1}}</h4> 
    <h4 >{{allData.Date}}</h4> 
</div> 
<ion-footer-bar class="bar-assertive" > 
    <button ng-disabled="mydisabled1" ng-click="previousItem();"> Previous </button> 
    <button ng-disabled="mydisabled2" ng-click="nextItem();"> Next</button> 
</ion-footer-bar> 



JS 
    $scope.openDetails = function(data){ 
      var fullArrayLength = $scope.MyData.length - 1; 
      $scope.data = data; 
      var index= $scope.MyData.indexOf(data); 
      $scope.index = index; 
      if(fullArrayLength == $scope.index){ 
       $scope.mydisabled2 = true; 
      }else if($scope.index == 0){ 
       $scope.mydisabled1 = true; 
      }else{ 
       $scope.mydisabled1 = false; 
       $scope.mydisabled2 = false; 
      } 
      var allData = $scope.MyData[$scope.index]; 
      $scope.allData = allData; 
     } 

    $scope.openDetails1 = function(arrayindex){ 
      var fullArrayLength = $scope.MyData.length - 1; 
      if(fullArrayLength == arrayindex){ 
       $scope.mydisabled2 = true; 
      }else if(arrayindex == 0){ 
       $scope.mydisabled1 = true; 
      } 
      $scope.data = $scope.data; 
      var allData = $scope.MyData[arrayindex]; 
      $scope.allData = allData; 
     } 

    $scope.previousItem = function(){ 
       $scope.openDetails1($scope.index - 1); 
       $scope.index--; 
     } 
     $scope.nextItem = function(){ 
       $scope.openDetails1($scope.index + 1); 
       $scope.index++; 
     } 

Answer 2

當您填寫第二頁時，您需要使用下一個/上一個元素的PID調用下一個/上一個函數。像這樣：

<ion-footer-bar align-title="left" class="bar-assertive"> 
    <button ng-click="next(97)">Next</button> 
    <button ng-click="previous(99)">Previous</button> 
</ion-footer-bar> 

爲了使用它，在next/previous函數中，需要實現重定向到新頁面。 PS：我想你不僅需要一個函數（goToPage（PID）），而不是兩個（下一個和前一個）。

Answer 3

您可以添加索引$範圍，將持有你正在瀏覽的網頁的索引，然後添加next和prev功能將是這樣的：

$scope.gotoPage = function(index) { 
    $scope.index = index; 
    ... 
}; 
$scope.next = function() { 
    $scope.gotoPage($scope.index+1); 
}; 
$scope.prev = function() { 
    $scope.gotoPage($scope.index-1); 
}; 

這將只有1和Page 2工作正在使用相同的控制器，他們使用不同的控制器，您將需要使用服務。