角度コントローラーでonclickを使用しているときにチェックボックスが機能しない

Question

角度コントローラーのチェックボックスを使用してGoogleマップv3のいくつかの場所を表示しようとしていますが、チェックボックスをクリックすると機能しません。 onclickに問題があり、performSearch関数を実行できないようです。私はangularjsを初めて使っているので、角度法でコードをどのように変更するかはわかりません。チェックボックスを有効にするにはどうすればよいですか？どんな助けもありがとうございます。前もって感謝します ！

これは私が達成したいものですが、コードは角度コントローラにないときにのみ機能します。ここ

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

Iは角度制御装置で試行コードの一部です。あなたが本当にのdocument.getElementById、 を使用していないが、あなたはあなたのチェックボックスがチェックされているかどうかチェックするために

NG-モデル=「名前」（$ scope.name）を使用することができますangularjsのコントローラーで

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; 
    } 

Answer 1

。

このすべての最初には、ドキュメントです：ngChecked

ので、

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

のような入力をして、あなたがperformSearchのループそれら（$ scope.options）（）、 このことができますを使用しますあなたのコードはaddListenerOnce（）でも動作します。 performSearchで

（）あなたは、あなたに申し訳ありません

train_station: true 
bus_station: false