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>

在First Page中点击“li”基于“PID”我打开第2页，包含所有细节。但是在第二页页脚中有选项可以从那里移动到下一个和之前的数据。如何在第二页上显示下一个或上一个数据。

Ex：我在第一页点击了第二个元素，我在第二页上获得了数据名称“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>

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

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使用相同的控制器时才有效，他们使用不同的控制器，你需要使用服务。

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

3 个答案: