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

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

最佳答案

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

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

关于javascript - AngularJS ng-repeat 如何从 jquery 每行添加数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36936058/

相关文章:

javascript - 如何在 angularjs 中同时执行 $http

javascript - typescript中的类有什么用

javascript - <Textarea> 定位在 <ul> TreeView 中

javascript - Niceedit 可在 localhost 上运行,但不能在 Heroku 上运行

jQuery UI Tab 与 Angular JS 绑定(bind)

javascript - 是否可以将 HTML 元素插入到 AngularJS 的文档中?

javascript - 是否有类似于 `onload` 的任何 Ember 事件

javascript - jQuery 的 jsfiddle 示例不适用于 jQuery 代码

jquery - 并排添加两个元素,响应式

javascript - AngularJS:目录结构(例如模块化编程)会影响加载时间吗?