0

The solution might be simple but i am not able to solve it. Just trying to show data in the next view from controller after clicking a anchor tag in the first view.the page changes successfully but data is showing.

//This is my App.js

.config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
  .state('Login',{
    url:'/Login',
    templateUrl:'templates/Login.html',
    controller:'SignInCtrl'

  })
.state('saledetailstable',{
    url:'/saledetailstable',
    templateUrl:'templates/saledetailstable.html',
    controller:'SignInCtrl'
  })

//This is my first view

<tr ng-repeat="item in saleitems">
       <td>{{item.id}}</td>
       <td>{{item.totalqnty}}</td>
       <td>{{item.totalprice}}</td>
      <td><a ng-click="additems()">{{item.inv_no}}</a></td>
       <td>{{item.inv_date}}</td>
       <td>{{item.sync_status}}</td>
       <td>{{item.device_Id}}</td>
       <td>{{item.U_id}}</td>
     </tr>

//This is my controller code

$scope.additems = function ()
  {
      $scope.saledetailsitems=[{ id: '45', item: 'hello' }];


   $state.go('saledetailstable');
  }

//This is my next view

<tr ng-repeat="item in saledetailsitems">
       <td>{{item.id}}</td>
       <td>{{item.item}}</td>
     </tr>
Ranendra
  • 21
  • 1
  • 9
  • I do believe every view has its own scope even though the controller is the same. So if you switch a view the controller is ran once again with a different scope. Use $rootScope to display items or pass the id of the id in the stateparams and retrieve it again – misha130 Jun 07 '16 at 06:40
  • sorry i couldn't understand it as i am new to it. can u please explain in code or how to use $rootScope @misha130 – Ranendra Jun 07 '16 at 07:03

3 Answers3

0

This is one possible way of how to do this, which is in my opinion the most cleanest. Its a bit complicated but I suggest you give it a try.

First of all configure an optional parameter in our routing configuration with the :var

.config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
  .state('Login',{
    url:'/Login',
    templateUrl:'templates/Login.html',
    controller:'SignInCtrl'

  })
.state('saledetailstable',{
    url:'/saledetailstable:id',
    templateUrl:'templates/saledetailstable.html',
    controller:'SignInCtrl'
  })

After this, in the state.go we add the parameter which is the id and check the stateParams on entry

app.controller('SignInCtrl',
  function ($scope,$stateParams) {
   $scope.additems = function ()
   {
           $state.go('saledetailstable', {"id": 45);
   }
   //Check for the state params when the view changes 

 $scope.$on('$ionicView.enter', function () {
      if($stateParams.id){
            $scope.saledetailsitems=[{ id: '45', item: 'hello' }];
       }
    });
});

Now this is the simpler way

app.controller('SignInCtrl',
  function ($rootScope,$scope) {
        if($rootScope.saledetailsitems)
         $scope.saledetailsitems = $rootScope.saledetailsitems;
       $scope.additems = function ()
      {
          $rootScope.saledetailsitems=[{ id: '45', item: 'hello' }];
          $state.go('saledetailstable');
      }
});

A rootscope is basically the most parent scope of all the application. It comes from when you create the app. So you can store things that are shared between views there. Obviously the downsides of this is that its memory inefficient and its sloppy

misha130
  • 5,457
  • 2
  • 29
  • 51
  • thanks bro.Let me give it a try. please check the comments in regular interval i will be posting more doubts after trying this... – Ranendra Jun 07 '16 at 07:25
0

@misha130's answer should work. Just another alternative to define the parameters.

you can use "params" attribute in state config:

.config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
  .state('Login',{
    url:'/Login',
    templateUrl:'templates/Login.html',
    controller:'SignInCtrl'

  })
.state('saledetailstable',{
    url:'/saledetailstable',
    templateUrl:'templates/saledetailstable.html',
    controller:'SignInCtrl',
    params: {
      item: undefined
    }
  })

This syntax is quite new, you can find it in this documentation: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider .

Also, this ticket is helpful: How to pass parameters using ui-sref in ui-router to controller

By the way, for better clarity, I suggest you use different controllers for states.

Community
  • 1
  • 1
D_S_toowhite
  • 643
  • 5
  • 17
0

Modify this line

<td><a ng-click="additems()">{{item.inv_no}}</a></td>

with

<td><a ng-click="additems(item)">{{item.inv_no}}</a></td>

and pass that item in next view.

On next page you can get array for item and show data from it.

OR

Alternatively you can assign it to $rootScope and get it in next view.

Regards.

Hardik Vaghani
  • 2,163
  • 24
  • 46