Question

使用ng-repeat显示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个ID为map的DOM元素。 DOM选择器 document.getElementById("map")只选择其中一个。你应该创建不同的id或使用类选择器来创建多个地图。

Answer 2

问题不在ng-repeat中，它是由于具有相同id的多个元素，即“<div id="map"></div>”

而发生的

元素ID在整个文档中应该是唯一的。 在具有相同id的多个元素的情况下，HTML DOM仅考虑该id的第一个元素并忽略其旁边的其他元素，因此只有第一个带有id map的列表才会生成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);

}

并在html

中添加 $ index（以0开头）

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

ng-repeat不能重复谷歌地图到所有列表

2 个答案: