在 Ionic 上的视图之间共享数据
Share data between views on Ionic
我正在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>
{{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:
<ion-view view-title="Emprendedor">
<ion-content ng-controller="CiudadCtrl">
<h1>{{item.nombre}}</h1>
</ion-content>
</ion-view>
我的第一个想法是一个弹出窗口,但很难将其编码:(
提前,谢谢
您可以使用服务来完成此任务
.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();
})
您需要有一个返回对象数组和单个项的服务。答:完成后,您需要按参数 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
相关文章:
- 在索引.html和应用.js [node.js] 之间共享变量
- Node.js上的WebSocket,并在所有连接的客户端之间共享消息
- 使用服务(AngularJS)在控制器之间共享数据
- AngularJS中的页面之间共享数据返回空
- 是否可以缓存可下载的文件,并在XHR和非XHR请求之间共享该缓存
- 在Knockoutjs中的ViewModels之间共享变量状态
- 通过共享服务在两个不同ng应用程序中的控制器之间共享数据
- Node.js服务器和浏览器之间共享二进制缓冲区
- 使用Angularjs在两个不同页面的控制器之间共享数据
- 在两个浏览器选项卡之间共享变量范围
- 不同进程之间共享Node.js环境
- 在Angular Bootstrap Modal和父控制器之间共享作用域
- 2ng控制器,并且需要在控制器之间共享数据
- Javascript创建函数,以便在其他函数之间共享变量
- 在控制器angular js之间共享数据
- 在javascript客户端和java服务器之间共享Google Analytics ClientID
- 如何将json文件中的数据提取到对象数组中,并在两个控制器之间共享
- Angular 2,在没有直接关系的两个组件之间共享一个对象
- 在angularJS中使用模态窗口时,在控制器之间共享对象数组
- 在角度上不同控制器之间共享状态