CODEWITHSUNDEEP
javascriptjqueryangularjs
lukassz
lukassz

Reputation: 3340

AngularJS ng-repeat how to add data from jquery each row

I'm using AngularJS to download json data from my API and I display them like this

    <div class="school" data-ng-repeat="s in szkola">
    <div class="city">{{s.typSzkoly}},   szkoła {{s.rodzajSzkoly}} 
<span class="dist"></span></div> //DISTANCE
    </div>
    <div class="tags">
       <div class="subject"><span>{{s.kodpocztowy}}</span></div>
       <div class="subject"><span>{{s.miasto}}</span><span> ul. {{s.adres}}</span></div>
    </div>
    </div>

Next my jQuery code calculate distance between two points.

 function callback(response, status) {
        console.log(response);
        console.log(status);
        if (status == google.maps.DistanceMatrixStatus.OK) {
            var origins = response.originAddresses;
            var destinations = response.destinationAddresses;
            for (var i = 0; i < origins.length; i++) {
                var results = response.rows[i].elements;
                for (var j = 0; j < results.length; j++) {
                    var element = results[j];
                    var distance = element.distance.text;
                    console.log("Distance: ", dystans);
                    //$(".dystans").append(dystans);
                    $(".widget.searching-result .school > .info > .city > .dist").html(distance);
                }
            }
        }
    }

console.log display data correctly but result in browser display only last result in all rows. How to add value from jQuery to each row from ng-repeat?

function codeAddress(dane, nazwy) {

        console.log("Jestem w codeAddress: " + nazwy[i]);
        for (var i = 0; i < dane.length; i++) {
            console.log("Kod pocztowy : " + kod[i]);
            console.log("pokaz1: " + nazwy[i]);
            {
                geocoder.geocode({'componentRestrictions':
                            {country: 'PL'}, address: dane[i]}, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        adresSLatLng = results[0].geometry.location;
                        service.getDistanceMatrix(
                                {
                                    origins: [adresULatLng], //adres Ucznia
                                    destinations: [adresSLatLng], //adres Szkoły
                                    travelMode: google.maps.TravelMode.WALKING,
                                }, callback);
                        console.log("Adres Ucznia: " + adresULatLng);
                        console.log("Adres Szkoły: " + adresSLatLng);
                        console.log("Wynik: " + results[0].geometry.location);
                    } else {
                        alert("Nie można wyliczyć dystansu: " + status);
                    }
                });
            }
        }

Upvotes: 0

Views: 72

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use index of iteration i along with :eq selector to only target that row:

  $(".widget.searching-result .school > .info > .city > .dist:eq("+ i +")").html(distance);

Upvotes: 1

misss-popcorn
misss-popcorn

Reputation: 600

use this-

(".widget.searching-result .school > .info > .city > .dist").append(distance);

Upvotes: 0

Related Questions