javascript - 如何在 Angular ng-repeat 中使用 $first 插入新的表行

Question

我正在尝试在我的 Angular 应用程序中获取地址的谷歌地图。我很确定问题出在 HTML 和 JS 的异步属性上，但我不知道在这种情况下如何解决这个问题。问题在于，虽然 map 在第一个客户地址下以可视方式加载，但 map 指向列表中的最后一个地址。

例如:

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。