ng-repeatはすべてのリストにGoogleマップを繰り返すことができません

Question

ng-repeat tho show 3 listを使用するときに問題があります。 Firsrのリストは、Googleマップの表示が2番目のリストと3番目のリストにあるため、大丈夫です。私はそれを修正する方法がわからないこの私のhtml

<ion-list> 
      <ion-item class="animate-repeat" ng-repeat="i in rep"> 
       <div class="card card-wraper" > 
        <div class="item item-text-wrap" > 
         <div id="map"></div> 
         <div id="over_map"> 
          <label > 
           <span class="input-label"></span> 
           <input input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type = 'date')" ng-model="trip"> 
          </label> 
          <div >    
           <select ng-options="size as size.code for size in sizes" ng-model="item" style="background-color:#262261;color: white"ng-change="update(item)"></select> 
          </div> 
         </div> 
        </div> 
       </div> 
      </ion-item> 
     </ion-list> 

と、この私のコントローラ

function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
      myOptions); 
} 
google.maps.event.addDomListener(window, "load", initialize); 

    for (var i=0; i<3; i++) { 


     $scope.trip = new Date(); 
     $scope.item = {}; 
      $scope.code = {}; 
      $scope.sizes = [{code: 123456789, name: 'Modul 1'}, {code: 864369038803163, name: 'Modul 2'}, 
       {code: 864369038796946, name: 'Modul 4'}, {code: 864369038803833, name: 'Modul 5'}, 
       {code: 864369038816645, name: 'Modul 6'}, {code: 864369038797142, name: 'Modul 7'}, 
       {code: 864369038796698, name: 'Modul 8'}]; 
      $scope.update = function (selected) { 
       $scope.item = selected; 
      }; 

    $scope.rep.push(i); 
    } 

を私はこの問題を解決する助けてください、ありがとう

Answer 1

問題はDOM要素にそのIDですあなたのリピーターは、IDがmapの3つのDOM要素を作成します。 DOMセレクタ document.getElementById("map")は、そのうちの1つだけを選択します。複数のマップを作成するには、異なるIDを作成するか、クラスセレクタを使用する必要があります。

Answer 2

問題がNGリピートしていない、それが原因同じIDすなわち「<div id="map"></div>」とmultple要素に起こっ

要素のIDはドキュメント全体内で一意でなければなりません。 同じidを持つ複数の要素の場合、HTML DOMはそのidの最初の要素のみを考慮し、隣のidを無視します。したがって、idマップの最初のリストのみがmapを生成しています。

idの代わりに、クラスで選択してください。することはできません：複数のID

function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map0 = new google.maps.Map(document.getElementsById("map0"), myOptions); 
    var map1 = new google.maps.Map(document.getElementsById("map1"), myOptions); 
    var map2 = new google.maps.Map(document.getElementsById("map2"), myOptions); 

} 

とマップこのキャッチされない例外TypeErrorようなエラーを表示していないHTMLで

<div id="map{{$index}}"></div>