Vishal Singh February 2016

How do I get set of data from JSON click on next and previous button

I am developing Hybrid mobile app with the help of Angular and Ionic. This is the sample data that i am getting :

$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"
     }]

1st Page 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>

2nd Page 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>

In First Page clicking on "li" based on "PID" I am opening 2nd page with all the details. But in 2nd Page footer have option move to next and previous data from there itself. How do I get next or previous data to show on 2nd page.

Ex: I clicked on Second element at first page and I got data Name "Sports Demo1" on 2nd Page. But once i will click on Next button data shoul

Answers


Emidio Dias February 2016

When you are filling the second page you need to call the next/previous function with the PID of the next/previous element. Like that:

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

For using that, in next/previous functions you need to implement the redirecting to the new page.

PS: I guess you don't only need one function (goToPage(PID)), instead of two (next and previous).


jcubic February 2016

You can add index to $scope that will hold index of the page you're on, and then add next and prev functions will look like this:

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

this will only work if page1 and page2 are using same controller of they use different one you will need to use a service.


Vishal Singh February 2016

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

Post Status

Asked in February 2016
Viewed 3,588 times
Voted 6
Answered 3 times

Search




Leave an answer