Angular 通过工厂对象问题的传单标记循环

Question

我正在设置 angular-leaflet-directive 并尝试加载我的标记，但它们没有通过循环。但是，当我将阵列记录到控制台时，它出现了。有什么我想念的吗？我应该将每个 i 作为对象推送吗？这是 plunkr

请耐心等待。我在学。长期潜伏者，第一次海报。我只是无法解决这个问题。这是我得到的：

var myapp = angular.module('myApp', ['leaflet-directive']);


myapp.controller('PredictionCtrl',
    function($http, $scope, ProductData, $timeout) {
        $scope.productData = ProductData;
        var markers = {};
        var i = 0;
        angular.forEach($scope.productData.products, function(product) {
            markers[i++]={
               lat: product.location.lat,
               lng: product.location.lng,
               message: "aaaa",
               focus: false,
               draggable: false
           };

           $scope.markers = markers;
        });
        angular.extend($scope, {
            vegas: {
                lat: 36.167583, 
                  lng: -115.141892,
                  zoom:  14
            }
        });
    });


myapp.factory('ProductData', function() {
var products = [ 
    {       pID : 1,
        p_name : "Pawn Stars Tour",
        location: {
          address : {
            street: "713 S Las Vegas Blvd",
            street2 : "",
            city : "Las Vegas",
            zip : 89101,
            country : "USA"
          },
          lat : 36.1616821,
          lng : -115.1474645,
        },          
        phone : "+1 702-385-7912"
      },
//product 2
      {
          pID: 2,
          p_name : "Sunset Grand Canyon Helicopter Tour",
          rank_init : 0.99999998,
          location : {
            address : {
              street : "5596 Haven St",
              street2 : "",
              city : "Las Vegas",
              zip : 89119,
              country : "USA"
            },
            district : "Downtown",
            lat : 36.0880348,
            lng : -115.1667809
          },
          phone : "+1 702-736-0606"
        },
//product3
        {
          pID: 3,
          p_name : "Dream Racing Experience",
          location : {
            address : {
              street : "Las Vegas Motor Speedway",
              street2 : "7000 N Las Vegas Blvd",
              city : "Las Vegas",
              zip : 89115,
              country : "USA"
            },
            district : "North Las Vegas",
            lat : 36.2728959,
            lng : -115.0110197
          },
          phone : "+1 702-599-5199"
  }];
  return products;
});

这是不行的。

https://plnkr.co/edit/nOtI9WLbIsjm5Y8tvkU0?p=preview 我基于此：http://plnkr.co/edit/evaQpqGZUz39Y7MNqbo7?p=preview

提前致谢

Answer 1

一些事情，$scope.productData 包含您要迭代的数组，而不是 $scope.productData.products。此外，您可以使用数组来添加标记对象，而不是对象，然后立即将其附加到范围。 $scope.markers = []。这样你就不必增加密钥等。这是更新的控制器：

myapp.controller('PredictionCtrl', [
            '$http', '$scope', 'ProductData',
    function($http,   $scope,   ProductData) {
        $scope.productData = ProductData;
        $scope.markers = [];
        angular.forEach($scope.productData, function(product) {
            $scope.markers.push({
                lat: product.location.lat,
                lng: product.location.lng,
                message: "aaaa",
                focus: false,
                draggable: false
            });
        });
        angular.extend($scope, {
            vegas: {
                lat: 36.175,
                lng: -115.136389,
                zoom:  10
            }
        });
    }
]);

还有一个关于 Plunker 的工作示例：https://plnkr.co/edit/O6pAPwRG9v7D1zReAdZL?p=preview

Angular 通过工厂对象问题的传单标记循环

Angular Leaflet Marker Loop via Factory Object Issue

javascript

angularjs

loops

leaflet

angular-leaflet-directive