javascript - 如何从 JSON 单击下一个和上一个按钮获取数据集

Question

我正在 Angular 和 Ionic 的帮助下开发混合移动应用程序。这是我得到的示例数据:

$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>

第二页 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”的“li”，我将打开包含所有详细信息的第二页。但在第二页页脚中，可以选择从那里移动到下一个和上一个数据。如何让下一个或上一个数据显示在第二页上。

例如:我单击了第一页的第二个元素，并在第二页上获得了数据名称“Sports Demo1”。但是，一旦我单击“下一步”按钮，数据应为“Sports Demo2”，或者单击“上一个”按钮数据应为“演示”。

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++; 
        }