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

例如：我在第一页点击了第二个元素，我在第二页得到了数据名称“Sports Demo1”。 但是一旦我点击下一个按钮数据应该是“Sports Demo2”或点击上一个按钮数据应该是“Demo”。

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>

为了使用它，在下一个/上一个函数中，您需要实现重定向到新页面。

PS：我猜你不仅需要一个函数（goToPage(PID)），而不是两个（下一个和上一个）。

Answer 3

您可以将索引添加到 $scope 以保存您所在页面的索引，然后添加 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);
};

这只有在 page1 和 page2 使用相同的控制器时才有效，它们使用不同的控制器，您需要使用服务。