Question

我正在开发Ionic上的第一个应用程序，我需要在列表页面中共享数据，当我点击项目时，我需要在另一个页面中显示项目详细信息

目前我正在制作此代码：

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

<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('CiudadCtrl', function($scope, $state, $stateParams) {



});

HTML for single：

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

我的第一个想法是弹出窗口，但很难对其进行编码:(

事先，谢谢

Answer 1

您可以使用服务执行此任务

  .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();
 })

Answer 2

您需要拥有一个返回对象数组和单个项目的服务。 A完成后，您需要按参数ID收集并将其发送到服务，以便特别返回该项目。现在，您可以在单个视图中使用该项目。

单身控制器：

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

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

服务（工厂）：

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];
          }
        }
      }
    }
  };
});

请参阅此Plunker：http://plnkr.co/edit/vFJte00JJkDGmbrqJt1d?p=preview

在离子

2 个答案: