CODEWITHSUNDEEP
javascriptangularjs
Matt Westlake
Matt Westlake

Reputation: 3651

How to use $first in angular ng-repeat to insert a new table row

I'm trying to get a google map for an address in my angular application. I'm pretty sure the issue is with the async properties of HTML & JS, but i'm not sure how to remedy that in this situation. The issue is that while the map is visually loading under the first customer address, the map points to the last address in the list.

EX: 

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

The directive is as follows:

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
    };
});

My HTML code:

    <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>

Upvotes: 0

Views: 505

Answers (1)

SSH
SSH

Reputation: 2553

ng-show only controls if HTML will be visible, it is still added to the DOM. Directive you are looking for is ng-if.

Upvotes: 1

Related Questions