通過工廠對象發布的角度小葉標記循環

Question

我正在設置angular-leaflet指令，並試圖加載我的標記，但是它們沒有通過循環。 但是，當我將陣列記錄到控制台時，它就會出現。 我有什么想念的嗎？ 我應該把每個i都當作對象嗎？ 這是小矮人

請耐心等待。 我在學。 長期潛伏，第一次海報。 我只是無法解決這個問題。 這是我得到的：

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保存要迭代的數組，而不是$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