AngularJS ng-repeat如何从jquery每行添加数据

时间:2016-04-29 10:34:45

标签: javascript jquery angularjs

我使用AngularJS从我的API下载json数据,然后像这样显示它们

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

接下来,我的jQuery代码计算两点之间的距离。

 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正确显示数据但导致浏览器仅显示所有行的最后结果。如何从jQuery向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);
                    }
                });
            }
        }

2 个答案:

答案 0 :(得分:1)

您可以使用迭代索引i:eq选择器来定位该行:

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

答案 1 :(得分:0)

使用此 -

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