Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Show - Hide - AngularJs

Estas en el tema de Show - Hide - AngularJs en el foro de Frameworks JS en Foros del Web. Buenas, estuve dando vueltas con este problema y no pude dar con la solución ya que también estoy empezando a usar el maravilloso framework angularjs, ...
  #1 (permalink)  
Antiguo 12/08/2015, 08:38
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 9 años, 5 meses
Puntos: 12
Pregunta Show - Hide - AngularJs

Buenas, estuve dando vueltas con este problema y no pude dar con la solución ya que también estoy empezando a usar el maravilloso framework angularjs, estoy usando la libreria Onsen - components

Tengo un mapa, donde muestro varios puntos de interes, la idea es, al hacer click en un punto de interes, debajo del mapa me muestre el detalle de este punto, como por ejemplo las coordenadas, el titulo y el contenido. Paso a mostrar mi codigo.

codigo map.html

Código HTML:
Ver original
  1. <ons-navigator ng-controller="MapController">
  2.    <ons-page>
  3.        <ons-toolbar>
  4.             <div class="left"><ons-back-button onclick="slidingMenu.setMainPage('settings.html')"></ons-back-button></div>
  5.             <div class="center">
  6.                 MAPS
  7.             </div>
  8.        </ons-toolbar>
  9.        
  10.         <div id="map_canvas"></div>
  11.  
  12.         <!-- Acá iria el detalle al hacer click sobre un punto de interes en el mapa -->
  13.         <div ng-show="false" id="detalle" style="margin-top: 6px; border: solid 1px #eee; width: 100%; height: 40%;">
  14.             <ons-list>
  15.                 <ons-list-item modifier="chevron" class="list-item-container">
  16.                   <div class="list-item-left">
  17.                     <img src="images/pic.png" class="avator">
  18.                   </div>
  19.                   <div class="list-item-right">
  20.                     <div class="list-item-content">
  21.                       <div class="name">Daniel
  22.                         <span class="lucent">@Danny</span>
  23.                       </div>
  24.                       <span class="desc">Hi, how are you? Glad to hear you are interested in our project.</span>
  25.                     </div>
  26.                   </div>
  27.                 </ons-list-item>
  28.             </ons-list>
  29.         </div>
  30.     </ons-page>
  31. </ons-navigator>

codigo controller.js
Código Javascript:
Ver original
  1. (function() {
  2.     var app = angular.module('myApp', ['onsen']);
  3.  
  4.      //Map controller
  5.     app.controller('MapController', function($scope, $timeout, $http){
  6.  
  7.         $scope.map;
  8.         $scope.markers = [];
  9.         $scope.markerId = 1;
  10.         $scope.marker;
  11.         $scope.geolocate;
  12.         $scope.content;
  13.         $scope.infowindow;
  14.         $scope.positionFarm;
  15.         $scope.contentFarm;
  16.         $scope.responsePromise;
  17.         $scope.url;
  18.         $scope.datos = {};
  19.          
  20.         //Map initialization
  21.         $timeout(function(){
  22.          
  23.             var myOptions = {
  24.                 zoom: 15,
  25.                 //center: latlng,
  26.                 mapTypeId: google.maps.MapTypeId.ROADMAP
  27.             };
  28.            
  29.             $scope.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  30.  
  31.             navigator.geolocation.getCurrentPosition(function(position) {
  32.        
  33.                 $scope.geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  34.  
  35.                 $scope.map.setCenter($scope.geolocate);
  36.                
  37.                 function setMarker(map, position, title, content) {
  38.                     var marker;
  39.                     var markerOptions = {
  40.                         position: position,
  41.                         map: $scope.map,
  42.                         title: title,
  43.                         icon: 'images/pic.png'
  44.                     };
  45.  
  46.                     $scope.marker = new google.maps.Marker(markerOptions);
  47.                     $scope.markers.push($scope.marker); // add marker to array
  48.  
  49.                     google.maps.event.addListener($scope.marker, 'click', function () {
  50.                        /*** Hasta acá puedo mostrar un alert con la posición y el titulo
  51.                          * Lo que tendría que hacer es hacer visible el div id="detalle" con el detalle del punto
  52.                          * de interes.
  53.                          ***/
  54.  
  55.                         ons.notification.alert({
  56.                             message: position + " " + title
  57.                         });
  58.                        
  59.                         return;
  60.                     });
  61.                    
  62.                 }
  63.                
  64.                 setMarker($scope.map, new google.maps.LatLng(-34.566653, -58.562298), 'Aberturas 3 de febrero', 'Aberturas 3 de frebreo, abierto 24hs');
  65.                 setMarker($scope.map, new google.maps.LatLng(-34.569494, -58.588517), 'Club hipico Gral. San Martín', 'Club hipico Gral. San Martín, abierto de lunes a viernes');
  66.                 setMarker($scope.map, new google.maps.LatLng(-34.557518, -58.581524), 'Farmacia la placita', 'Farmacia la placita, abierta 24hs.');
  67.                 setMarker($scope.map, new google.maps.LatLng(-34.565752, -58.575730), 'Farmacia Maipú', 'Farmacia Maipú, abierta 24hs.');
  68.                 setMarker($scope.map, new google.maps.LatLng(-34.559285, -58.568606), 'Farmacia av. 101 9 de julio', 'Farmacia 9 de julio, abierta 24hs.');
  69.                 setMarker($scope.map, new google.maps.LatLng(-34.561841, -58.569289), 'Farmacia Almirante', 'abierta 24hs.');
  70.                 setMarker($scope.map, new google.maps.LatLng(-34.612691, -58.534079), 'Farmacia villa raffo', 'Abierto las 24hs, para lo que necesites');
  71.                 setMarker($scope.map, new google.maps.LatLng(-34.614399, -58.531352), 'Farmacia plus', 'Siempre mas para vos');
  72.                
  73.                 $scope.marker = new google.maps.Marker({
  74.                     position: $scope.geolocate,
  75.                     map: $scope.map,
  76.                     title: "Usted esta aquí!"
  77.                 });
  78.                
  79.             });
  80.          
  81.         },100);
  82.  
  83.      });
  84.  
  85.     })();


Desde ya gracias a todos por su tiempo.!!!
__________________
http://www.sp-vision.net
  #2 (permalink)  
Antiguo 12/08/2015, 11:46
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 14 años, 5 meses
Puntos: 36
Respuesta: Show - Hide - AngularJs

La verdad nunca he usado onsen, pero asi rapido viendo el código, desde que estás usando elementos del dom en el controller te debería dar una idea que eso debería pasarse a una directiva.
Dentro de la directiva puedes acceder a los elementos que agrega esta y agregarle los listeners.

Si la información es estática podrías crear objetos con el contenido y simplemente poner la directiva de ng-if dentro del container y con el $scope.detailInfo (por ejemplo) con el objeto correspondiente.
O bien si el contenido varia completamente de forma que los binding no te sirven, puedes usar templates (scripts text/ng-template) y cargarlos independientemente.

Otra recomendación esta meramente personal es darle un poco mas de significado a tu codigo, como crear funcion init, crear funcion setMarker que le mande llamar init, inicializeMarker donde cargue coordenadas con titulos, etc. Lo hardcodeado podria ser angular.constants, etc..
  #3 (permalink)  
Antiguo 12/08/2015, 12:08
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 9 años, 5 meses
Puntos: 12
Respuesta: Show - Hide - AngularJs

Gracias Dafonz por responder.

La información es estatica, porque tengo que presentar una demo, si la aprueban ya tengo que diseñar el servicio y la db para consumir datos de una tabla.

Intentare con lo que me dices.

Nuevamente gracias por tu comentario.
__________________
http://www.sp-vision.net

Etiquetas: angular, google, hide, js, show
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:04.