Question

我试图在我的角度应用程序中获取谷歌地图的地址。我很确定问题出在HTML＆amp;的异步属性上。 JS，但我不确定在这种情况下如何解决这个问题。问题是，当地图在第一个客户地址下可视地加载时，地图指向列表中的最后一个地址。

EX：

123 test drive
#Map gets inserted here, but is for 789 test drive
456 test drive
789 test drive

该指令如下：

app.directive('addressBasedGoogleMap', function() {
    var linkFunction = function(scope, element, attrs) {
        var googleAddress = scope.$eval(attrs.address);
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': googleAddress}, function (results, status){ 
            if (status == google.maps.GeocoderStatus.OK) { 
                var mapOptions = { zoom: 16, center:results[0].geometry.location, mapTypeId:google.maps.MapTypeId.ROADMAP}
                var map = new google.maps.Map(document.getElementById('addressMap'), mapOptions); 
                var marker1 = new google.maps.Marker({
                       position: results[0].geometry.location,
                       map: map,
                       title: googleAddress
                     });
            }
            else{
                alert(status)
            }
        })
    };
    return {
        template : "<div id='addressMap' style='width: 500px; height:500px;'></div>",
        link: linkFunction
    };
});

我的HTML代码：

    <tbody>
        <tr ng-repeat-start = "customerOrder in CustomerOrders | orderBy: '-timeEntered'">
            <td>{{customerOrder.timeEntered | date:'MM/dd/yyyy @ h:mma'}}</td>
            <td>{{customerOrder.address}}</td>
        </tr>
        <tr ng-show="$first">
            <td colspan="6" address-based-google-map address="'{{customer.address}}'"></td>
        <tr ng-repeat-end></tr>
        </tr>
    </tbody>

Answer 1

ng-show仅控制HTML是否可见，它仍然添加到DOM中。您正在寻找的指令是ng-if。

如何在角度ng-repeat中使用$ first来插入新的表格行

1 个答案: