使用Ionic在弹出窗口中显示项目详细信息

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 popup (i try single page, not work)

我正在开发Ionic上的第一个应用程序,我需要在列表页面*享数据,当我点击项目时,我需要在弹出窗口中显示项目详细信息(我尝试单页,不工作)

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: "[phone]",
            servicio: "alojamiento"
        }]
    },
    {
        id_ciudad: 62,
        name: "Marchigue",
        emprendedores: [{
            id_emprendedor: 621,
            nombre: "Cabañas Las Luciérnagas",
            telefono: "[phone]",
            servicio: "alojamiento"
        }]
    }
    ];
})

HTML for display list:

用于显示列表的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>

I need when user click on item, display a popup with details and a button with "Call to phone" action

当用户点击项目时,我需要显示带有详细信息的弹出窗口和带有“呼叫电话”操作的按钮

In advance, thanks

提前谢谢

1 个解决方案

#1

Check out $ionicModal.

看看$ ionicModal。

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

Example: http://codepen.io/ionic/pen/gblny