Question

我正在使用angularJS和ionicframework（最后一个测试版v.11）在javascript中编写移动应用程序，我创建了一个对象，并希望在ng-repeat中显示所有对象。为什么nr-repeat不显示任何内容？这是我的对象屏幕：

enter image description here

我将此代码用于范围内的put值：

$scope.distanceSuppliers = myCar;

这是html中的代码：

<ion-item ng-repeat="(id, supplier) in distanceSuppliers">
            <div class="items item-button-right" ng-click="openDetails(id)">
                {{supplier.name}}<br />
                {{supplier.address}}<br />
            </div>
        </ion-item>

这是我完整的JS代码：

.controller('suppliers', function($scope, cw_db, $ionicPopup, $ionicActionSheet, appdelegate, $rootScope, $firebase, $location, $ionicLoading, cw_position) {

    $ionicLoading.show({
        template: 'Updating data..'
    });

    var geocoder;
    var tot = 0;
    var done = 0;
    geocoder = new google.maps.Geocoder();

    cw_db.getData(cw_db.getSuppliers(), "", function(suppliers) {

        cw_position.getPosition(function (error, position) {
            suppliers.on('value', function(supp) {
                $scope.distanceSuppliers = {};
                tot = 0;
                done = 0;
                supp.forEach(function(childSnapshot) {
                    tot++;
                    var childData = childSnapshot.val();
                    if (childData.address) {
                        calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                    }
                });
            });
            $ionicLoading.hide();
        });
    });


    function calculateDistance(childData, usrLat, usrLon) {
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
            {
              origins: [new google.maps.LatLng(usrLat, usrLon)],
              destinations: [childData.address],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
            }, function(response, status) {
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    alert('Error was: ' + status);
                } else {
                    done++;
                    var results = response.rows[0].elements;
                    childData.distance = results[0].distance.value;
                    $scope.distanceSuppliers.push(childData);
                    if (done == tot) {

                        console.log($scope.distanceSuppliers);
                    }
                }
            });
    }


    $scope.openDetails = function(index) {
        //appdelegate.setCallId(index);
        //$location.path("/app/supplierDetails");
    }

})

出了什么问题？

Answer 1

不确定，但我相信您有数据绑定更新问题。

尝试使用$ timeout强制渲染：

w_position.getPosition(function (error, position) {
     $timeout(function() {
        suppliers.on('value', function(supp) {
            $scope.distanceSuppliers = {};
            tot = 0;
            done = 0;
            supp.forEach(function(childSnapshot) {
                tot++;
                var childData = childSnapshot.val();
                if (childData.address) {
                    calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                }
            });
        });
        $ionicLoading.hide();
    }); 
});

并且不要忘记将$timeout参数添加到控制器：

.controller('suppliers', function($scope, ...<other parameters here>..., $timeout) {

Answer 2

我发现了问题！修复使用 $ scope。$ apply（）;

问题在于我使用以下代码编写了不同的$ scope：

cw_position.getPosition(function (error, position) {
            suppliers.on('value', function(supp) {
                tot = 0;
                done = 0;
                supp.forEach(function(childSnapshot) {
                    tot++;
                    var childData = childSnapshot.val();
                    if (childData.address) {
                        calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                    }
                });
            });
            $ionicLoading.hide();           
        });

其中cw_position.getPosition使用以下代码调用js：

angular.module('cw_position', [])
.service('cw_position', function() {

    this.getPosition = function(callback) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                return callback(null, position);
            }, 
            function(error) {
                return callback(error, null);
            }
        );
    }


    //  Built google maps map option
    //
    this.getGoogleMapOptions = function (lat, lon, zoom, type) {
        if (type == null) {
            type = google.maps.MapTypeId.ROADMAP;
        }
        var mapOptions = {
            center: new google.maps.LatLng(lat, lon),
            zoom: zoom,
            mapTypeId: type
        };
        return mapOptions;
    }

});

navigator.geolocation.getCurrentPosition会导致问题＆＃39;

向所有人寻求帮助

角度，尝试在ng-repeat中显示对象失败

2 个答案: