Sidemenu Master Detail data from Firebase

ionic-v1
1

I am having troubles to pass values from master list to detail. Even when select a “person” on master list this code is showing the default rout (browse.html), so I understand probably I have two problems: 1st Routing and 2nd passing data from master to detail in order to show additional information.

Please help me guys, thanks in advance.

Starter: Sidemenu
Data from: Firebase

app.js


.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'
        }
      }
    })
 
    .state('app.master', {
      url: '/master',
      views: {
        'menuContent': {
          templateUrl: 'templates/master.html',
          controller: 'MasterCtrl'
        }
      }
    })
  .state('app.details', {
    url: '/master/:personId',
    views: {
      'menuContent': {
        templateUrl: 'templates/details.html',
        controller: 'DetailsCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/app/browse');
});

  



controllers.js



angular.module('starter.controllers', [])

.factory('PeopleService', function($firebaseArray, $firebaseObject){

  var ref = new Firebase('https://marcelperez-master-detail.firebaseio.com');
  return {
    getPeople: function(){
      return $firebaseArray(ref.child('people'));
    },
    getPerson: function(personId){
      return $firebaseObject(ref.child('people').child(personId));
    }
  }
})

.controller('MasterCtrl', function($scope, PeopleService){
  $scope.people = PeopleService.getPeople();
    
})

.controller('DetailsCtrl', function($scope, $stateParams, PeopleService){
  var personId = $stateParams.id;
  $scope.person = PeopleService.getPerson(personId);
  
});




master.html

      {{person.name}}
      

details.html

    
    
{{person.name}}

    
{{person.website}}

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              2
              
            

            

              

As far as i see you have to controller and two html page in which you are getting data

try this

make a service to get data from one page to another and inject the below service in your controller.


app.factory(‘Grabdata’, function(){

var currdata={};


return

{

passdata:function(obj)

{

currdata=obj;

},

getdata:function()

{

return currdata;

currdata={};

}

}


});

IN MasterCtrl -


$scope.people=;

$scope.people = PeopleService.getPeople();


$scope.gotodetails=function(item)

{

Grabdata.passdata(item);

$state.go(‘detail’);

}


console.log($scope.people) // Are you getting data here in console.log . If getting than


in master.html

< ion-item ng-repeat= “item in people” ng-click=gotodetails(item){{item.name}}< /ion-item>


DetailCtrl

$scope.data =GrabData.getdata();

console.log(data) // IF you are getting data here Than


in details.html



< h2 >{{data.name}} < /h2 >

< h3 >{{data.website}}< /h3>


hope this w’ll help you .