Share data between views on Ionic

Question

I'm developing my first app on Ionic and i need share data in list page and when i click on item, i need to display item details in another single page

Currently i'm make this code:

.controller('CiudadesCtrl', function($scope, $state) {

    // SEXTA REGION
    // Accordeon para la lista de ciudades
    $scope.groups = [
    {
        id_ciudad: 61,
        name: "Santa Cruz",
        emprendedores: [{
            id_emprendedor: 611,
            nombre: "Cabañas El Salto",
            telefono: "+56912345678",
            servicio: "alojamiento"
        }]
    },
    {
        id_ciudad: 62,
        name: "Marchigue",
        emprendedores: [{
            id_emprendedor: 621,
            nombre: "Cabañas Las Luciérnagas",
            telefono: "+56912345678",
            servicio: "alojamiento"
        }]
    }
    ];
})

HTML for display list:

<ion-view view-title="" hide-nav-bar="false" hide-back-button="false">
    <ion-content class="int-regiones" ng-controller="CiudadesCtrl">
        <h1 class="col-100">Región de O'Higgins</h1>
        <div class="featured">
            <img src="img/mapa-region-6.jpg" alt="" />
        </div>
        <div class="content">
            <div class="list col-100">
                <ion-list>
                    <div ng-repeat="group in groups">
                        <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
                            <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
                            &nbsp;
                            {{group.name}}
                        </ion-item>
                        <ion-item ng-repeat="item in group.emprendedores" class="item-accordion" ng-show="isGroupShown(group)">
                            <a id="{{group.id}}" class="item item-avatar" href="#/app/emprendedor/{{item.id_emprendedor}}">
                                <img src="img/ico-{{item.servicio}}.png">
                                <h2>{{item.nombre}}</h2>
                                <span>{{item.telefono}}</span>
                            </a>
                        </ion-item>
                        <!-- -->
                    </div>
                </ion-list>
            </div>
        </div>
    </ion-content>
</ion-view>

Controller for single:

.controller('CiudadCtrl', function($scope, $state, $stateParams) {



});

And HTML for single:

<ion-view view-title="Emprendedor">
  <ion-content ng-controller="CiudadCtrl">
    <h1>{{item.nombre}}</h1>
  </ion-content>
</ion-view>

My first idea, was a popup, but is very hard to code it :(

In advance, thanks

rkalita · Answer 1 · 2016-01-29T01:02:08.967

2

You can use a service for this task

  .service('info', function() {
      var self = this;
      self.get = function() {
        return [ 
               { 
                   id_ciudad: 61, name: "Santa Cruz", emprendedores: 
                   [
                       { 
                           id_emprendedor: 611, 
                           nombre: "Cabañas El Salto", 
                           telefono: "+56912345678", 
                           servicio: "alojamiento" 
                       }
                    ] 
               }, 
               {
                  id_ciudad: 62, name: "Marchigue", emprendedores: 
                   [
                       { 
                           id_emprendedor: 621, 
                           nombre: "Cabañas Las Luciérnagas", 
                           telefono: "+56912345678", 
                           servicio: "alojamiento" 
                       }
                   ]
                } 
          ]; //here is your groups ad example
      }
   });

 .controller('CiudadCtrl', function($scope, $state, $stateParams, info) {
     $scope.groups = info.get();
 });

 .controller('CiudadesCtrl', function($scope, $state, info) {
     $scope.groups = info.get();
 })

edited Jan 29 '16 at 01:02

answered Jan 29 '16 at 00:32

rkalita

575
4
16

Inside 'return' i can put the code inside scope.groups? – Carlos Jan 29 '16 at 00:41
You're right. You can put you array with groups here. It's just example – rkalita Jan 29 '16 at 00:42
Can you modify your code with example please, i'm newbie on Ionic and AngularJS – Carlos Jan 29 '16 at 00:44
Sorry dude but I can't do this now, I'm here by mobile phone:) you need just put your array with group into get function in the service instead of [1,2,3,4]. – rkalita Jan 29 '16 at 00:49
Only the array, without '$scope.groups'? – Carlos Jan 29 '16 at 00:52
The answer is updated – rkalita Jan 29 '16 at 00:57
Tell me if it helps for you – rkalita Jan 29 '16 at 01:12
Okay, i fix the error when AngularJS call to services.js, but the data isn't displayed on single page :( – Carlos Jan 29 '16 at 13:59

Rafael Terán · Answer 2 · 2016-02-12T11:44:40.890

You need to have a service that returns the array of objects and a single item. A Once done, you need to collect by parameters id and send it to the service so that it will return the item in particular. Now you have the item in single view.

Controller for single:

app.controller('CiudadCtrl', function($scope, $stateParams, groupService) {
    var itemId = $stateParams.id;

    $scope.item = groupService.GetItem(itemId);
});

Service (factory):

app.factory('groupService', function() {
  var items = [{
    id_ciudad: 61,
    name: "Santa Cruz",
    emprendedores: [{
      id_emprendedor: 611,
      nombre: "Cabañas El Salto",
      telefono: "+56912345678",
      servicio: "alojamiento"
    }]
  }, {
    id_ciudad: 62,
    name: "Marchigue",
    emprendedores: [{
      id_emprendedor: 621,
      nombre: "Cabañas Las Luciérnagas",
      telefono: "+56912345678",
      servicio: "alojamiento"
    }]
  }];
  var itemsLength;
  var emprendedoresLength;

  return {
    GetItems: function() {
      return items;
    },
    GetItem: function(itemId) {
      itemsLength = items.length;
      for (i = 0; i < itemsLength; i++) {
        emprendedoresLength = items[i].emprendedores.length;
        for (x = 0; x < emprendedoresLength; x++) {
          if (items[i].emprendedores[x].id_emprendedor == itemId) {
            return items[i].emprendedores[x];
          }
        }
      }
    }
  };
});

See this Plunker: http://plnkr.co/edit/vFJte00JJkDGmbrqJt1d?p=preview

Share data between views on Ionic

2 Answers2