флажок не работает при использовании onclick в угловом контроллере

0

Я пытаюсь использовать флажки в угловом контроллере, чтобы показать некоторые места на Google Maps v3, но когда я нажимаю флажки, они не работают. Похоже, что проблема заключается в onclick, и функция executeSearch не может быть выполнена. Я новичок в angularjs, поэтому я не уверен, как изменить код в угловом методе. Что делать, чтобы сделать флажки эффективными? Любая помощь приветствуется. Заранее спасибо !

Вот чего я хочу достичь, но код работает только тогда, когда он не находится в угловом контроллере.

http://jsfiddle.net/wsc358203708/rn92mkkn/15/

Вот часть кода, который я пробовал в угловом контроллере.

 var infowindow;
  var service;
  var transportMap;
  var markersArray = [];
  var options = ['train_station', 'bus_station', 'subway_station', 'transit_station', 'airport',
    'grocery_or_supermarket', 'hospital', 'movie_theater', 'restaurant', 'shopping_center', 'park', 'night_club', 'pharmacy', 'police', 'embassy', 'shopping_mall'
  ];

  $(document).ready(function() {
    initializeTransportMap();

  });

  function getLetteredIcon (letter) {
    return "http://www.google.com/mapfiles/marker" + letter + ".png";
  }

  function initializeTransportMap() {
    var transportLatLng = {
      lat: $scope.result[1].data[0].Latitude,
      lng: $scope.result[1].data[0].Longitude
    };

    transportMap = new google.maps.Map(document.getElementById('transportMap'), {

      center: transportLatLng,
      scrollwheel: false,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      //   mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControl: true,
      disableDefaultUI: false,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
      }
    });

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(transportMap);


    var defaultMarker = 'http://maps.google.com/mapfiles/kml/shapes/ranger_station.png';
    var marker = new google.maps.Marker({
      position: transportLatLng,
      map: transportMap,
      icon: defaultMarker,
      title: 'Hello World!'
    });
    google.maps.event.addListenerOnce(transportMap, 'bounds_changed', function() {
      $scope.performSearch
    });

    for (var i = 0; i < options.length; i++) {
      document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" ng-click="performSearch()"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>';


    }

  }

  $scope.performSearch = function() {
    clearMaps();
    var clickedOptions = [];
    for (var i = 0; i < options.length; i++) {
      if (document.getElementById(options[i]).checked) {
        performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)));
      }
    }
  }

  $scope.performTypeSearch = function(type, icon) {
    var request = {
      //   bounds: transportMap.getBounds(),
      location: transportLatLng,
      radius: 5000,
      types: [type]
    };
    service.radarSearch(request, function(results, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(type + ":" + status);
        return;
      }
      for (var i = 0, result; result = results[i]; i++) {
        createMarker(result, icon);

      }
    });
  }

  $scope.createMarker = function(place, icon) {
    var marker = new google.maps.Marker({
      map: transportMap,
      position: place.geometry.location,
      icon: icon

    });
    markersArray.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      service.getDetails(place, function(result, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          alert(status);
          return;
        }
        infoWindow.setContent(result.name);
        infoWindow.open(transportMap, marker);
      });
    });
  }

  $scope.clearMaps = function() {
    for (var i = 0; i < markersArray.length; i++) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
  • 0
    извини, я не могу понять, что ты сказал. не могли бы вы объяснить это больше, пожалуйста?
  • 0
    Мой плохой был плохой комментарий
Теги:
checkbox

1 ответ

0
Лучший ответ

В контроллере angularjs вы действительно не используете document.getElementById, но можете использовать

ng-model = "name" ($ scope.name), чтобы проверить, установлен ли ваш флажок.

Прежде всего это документация: ngChecked

Таким образом, используйте

<input type="checkbox" ng-model="options.train_station" ng-change='performSearch()'>

а затем вы можете зацикливать их ($ scope.options) в performSearch(), таким образом ваш код также будет работать с addListenerOnce().

В performSearch() вы можете проверить значения

angular.forEach($scope.options, function(value, key) {
    console.log(key + ': ' + value);
});

даст вам что-то вроде

train_station: true
bus_station: false
  • 0
    Спасибо за Ваш ответ!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню