I am having a problem with these labels.
I have an arrangement with certain information, including longitude and latitude of this I markers within a map. To click on any of them want to show information from each of these markers. The problem is that it does not recognize the values of my arrangement.
my array :
$scope.views = [
{
id : 0,
nombre : 'Problema con cableado',
fecha : '18/05/2014 a las 15:17',
estado : 'En revisión',
latitud : -33.3995448,
longitud : -70.5705277,
img : 'img/cables.JPG',
comentario : 'Exiten problemas en el cableado, estan sueltos y es peligroso. Concurre mucha gente por ese lugar.',
like : 1,
like_me : true,
icono : 'icon ion-android-favorite',
clase : 'label_estado label-warning'
},
{
id : 1,
nombre : 'Poste en mal estado',
fecha : '09/11/2013 a las 20:45',
estado : 'Solucionado',
latitud : -33.4024754,
longitud : -70.5919616,
img : 'img/poste.jpeg',
comentario : 'El poste esta a punto de caer, se encuentra en una calle muy concurrida por personas y automóviles.',
like : 5,
like_me : true,
icono:'icon ion-android-favorite',
clase : 'label_estado label-success'
},
{
id : 2,
nombre : 'Cañeria rota',
estado : 'Falta información',
fecha : '03/03/2012 a las 12:13',
latitud : -33.406975,
longitud : -70.57283,
img : 'img/caneria.jpg',
comentario : 'Esta rota y oxidada, corre agua por todo el lugar.',
like : 0,
like_me : false,
icono : 'icon ion-android-favorite-outline',
clase : 'label_estado label-info'
}
];
My html :
<ion-content class="map-container">
<map center="{{latitud}}, {{longitud}}" zoom="12" id="map_views" data-tap-disabled="true">
<div id="class" data-tap-disabled="true" ng-repeat="view in views">
<marker position="{{view.latitud}}, {{view.longitud}}" on-click="verInfo({{view}})" data-tap-disabled="true"/>
</div>
</map>
function :
$scope.verInfo = function(view){
$ionicPopup.show({
title: 'Información View',
subTitle: '',
content: '<p>Nombre : '+view.nombre+'</p><p>Estado : '+view.estado+'</p><p>Fecha : '+view.fecha+'</p><img src='+view.img+'>',
buttons: [
{
text: 'Ok',
type: 'button-positive',
onTap: function(e) {
}
},
]
})
}
Undefined receive only data and not understand why.
** EDIT **
I realized that if data arrive, but arrive out of order and not as I declare. For example:
<ion-content class="map-container">
<map center="{{latitud}}, {{longitud}}" zoom="12" id="map_views" data-tap-disabled="true">
<div id="class" ng-repeat="marker in markers" data-tap-disabled="true">
<marker position="{{marker.latitud}}, {{marker.longitud}}" on-click="verInfo(marker.nombre,marker.fecha,marker.estado)" data-tap-disabled="true"/>
</div>
</map>
</ion-content>
OUTPUT :
kq {latLng: rf, gb: undefined, pixel: undefined, pa: undefined, stop: function} console-via-logger.js:173
Poste en mal estado console-via-logger.js:173
09/11/2013 a las 20:45
This is quite rare, I have no idea because they will be producing.
You should use on-click
to get function working (without interpolation directive {{}}
).
<div id="class" data-tap-disabled="true" ng-repeat="view in views">
<marker position="{{view.latitud}}, {{view.longitud}}" on-click="verInfo(view)" data-tap-disabled="true"/>
</div>
The only solution I can do is this:
<ion-content class="map-container">
<map center="{{latitud}}, {{longitud}}" zoom="12" id="map_views" data-tap-disabled="true">
<div id="class" data-tap-disabled="true" ng-repeat="view in views">
<marker ng-repeat="marker in view" position="{{marker.latitud}}, {{marker.longitud}}" on-click="verInfo(marker,marker)" data-tap-disabled="true"/>
</div>
</map>
</ion-content>
And also change the format of my array now JSON
$scope.views = {
"values": [
{
"id": 0,
"nombre": "Problema con cableado",
"fecha": "18/05/2014 a las 15:17",
"latitud": -33.399544,
"longitud": -70.570526,
"img": "img/cables.JPG",
"estado": "En revisión",
"clase": "label_estado label-warning",
"comentario": "Exiten problemas en el cableado, estan sueltos y es peligroso. Concurre mucha gente por ese lugar."
},
{
"id": 1,
"nombre": "Poste en mal estado",
"fecha": "09/11/2013 a las 20:45",
"latitud": -33.402477,
"longitud": -70.591965,
"img": "img/poste.jpeg",
"estado": "Solucionado",
"clase": "label_estado label-success",
"comentario": "El poste esta a punto de caer, se encuentra en una calle muy concurrida por personas y automóviles."
},
{
"id": 2,
"nombre": "Cañeria rota",
"fecha": "03/03/2012 a las 12:13",
"latitud": -33.406975,
"longitud": -70.57283,
"img": "img/caneria.jpg",
"estado": "Falta información",
"clase": "label_estado label-info",
"comentario": "Esta rota y oxidada, corre agua por todo el lugar."
}
]
}