ng-repeat無法重複谷歌地圖到所有列表

Question

我使用ng-repeat tho顯示3列表時遇到了一些問題。 Firsr列表是好的，因爲谷歌地圖顯示，但在第二個列表和第三個列表。這是我的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是獨一無二的，您的轉發器創建3個DOM元素，編號爲map。 DOM選擇器 document.getElementById("map")只挑選其中的一個。你應該創建不同的ID或使用類選擇器來創建多個地圖。

Answer 2

的問題是不是在NG-重複，它的發生是由於multple元素具有相同的ID即「<div id="map"></div>」

元素ID應該是整個文檔中是唯一的。 在多個元素具有相同標識的情況下HTML DOM僅考慮該標識的第一個元素並忽略其旁邊的其他元素，因此只有帶有標識地圖的第一個列表正在生成地圖。

嘗試使用類選擇類而不是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); 

} 

，並添加$指數

選擇地圖（從0開始）在HTML

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