CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Nisal Malinda Livera
Nisal Malinda Livera

Reputation: 401

How do i get the search results of a search page into the next page and display

In this ionic application I want to enter data from the search page and show the results in the next page. But when i try it it wont work. And i can get the search results to the console. and the data wont pass to the next page even i make the same controller for both the pages. Please help me to resolve this issue!! Thanks!!

This is my button code ('searchA' is the object containing entered data)

<button type="button"  class="button button-block button-positive" ng-click="search(searchA)" ui-sref="app.MainSearchResult">Search</button>

These are my states (app.js file)

    .state('app.MainSearch', {
      cache:false, 
      url: '/MainSearch',
      views: {
        'menuContent': {
          templateUrl: 'templates/MainSearch.html',
          controller: 'MainSearchCtrl'
        }
      }
    })

    .state('app.MainSearchResult', {
  url: '/MainSearchResult,
  views: {
    'menuContent': {
      templateUrl: 'templates/MainSearchResult.html',
      controller: 'MainSearchResultCtrl'
    }
  }
})

This is my search function (controller.js)

  $scope.search = function(searchA){

    console.log('No : '+ searchA.emp_EPF);
    console.log('Name : '+ searchA.emp_Name);
    console.log('Company :'+ searchA.emp_Comp);
    //console.log('qualification Type : ' + emp_qualiType);
    console.log('-------------------');

    $http({
      method: 'GET',
      url: 'http://localhost/mas/Search.php',
      params: {employeeNo : searchA.emp_EPF,
        employeeName : searchA.emp_Name,
        employeeCompany : searchA.emp_Comp,
        employeeBusinessUnit : searchA.emp_BU,
        employeeTeamName : searchA.emp_Team,
        employeeSecondaryCompany : searchA.emp_secondmant,
        employeeRelatedEmployee : searchA.emp_relatedEmp,
        employeeWorkLevel : searchA.emp_workl,
        employeeDesignationName : searchA.emp_designation,
        qualificationType : searchA.emp_qualiType,
        qualificationField : searchA.emp_qualiField,
        programName : searchA.emp_progName,
        serviceProvider : searchA.emp_svcProvider
      }
    }).then(function successCallback(response) {
      $scope.searchResults  = response.data['records'];
      console.log('success :'+ JSON.stringify($scope.searchResults));      

    }, function errorCallback(response) {
      console.log('error',response);
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

    angular.copy($scope.resetData,searchA);

  }

This is my results set view of the next page.

  <ion-list ng-repeat="x in searchResults">
    <ion-item class="item item-text-wrap"  >
      <div >
        <h2>{{x.employeeNo}}</h2>
        <p>{{x.employeeName}}</p>
          <div>
            <a class="button button-outline button-medium button-positive" >Edit</a>
          </div>
      </div>
    </ion-item>
  </ion-list>

Please Help me to get this done!! Thanks!!

Upvotes: 0

Views: 603

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222702

A simple solution is to have a factory return an object and let your controllers on both pages work with a reference to the same object

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    //Make your search request here.
    return Data;
});
myApp.controller('MainSearchCtrl', function( $scope, Data ){
    $scope.searchResults  = Data;
});
myApp.controller('MainSearchResultCtrl', function( $scope, Data ){
    $scope.searchResults  = Data;
});

The easiest way to share data between views/scopes/controllers, the easiest way is to store it in $rootScope.

In MainSearchCtrl,

 $scope.searchResults  = response.data['records'];
 $rootscope.searchResults  = $scope.searchResults;

You can use the same variable on the SearchResults page as well.

Upvotes: 1

Related Questions