javascript - 对象未显示在传单 AngularJS 上

Question

我正在制作一个用于使用 AngularJS 进行训练的小应用程序，但我遇到了问题。我通过 API 接收 JSON 数据，然后使用 Angular 的传单指令将其显示在 map 中。

问题是我尝试显示的错误之一。

这是我的 Controller :

toulouseVeloControllers.controller('toulouseVeloListCtrl', ['$scope', '$http',
  function($scope, $http) {

      angular.extend($scope, {
          osloCenter: {},
          markers: {},
          defaults: {
              scrollWheelZoom: false
          }
      });


      $http.get('https://api.jcdecaux.com/vls/v1/stations?contract=toulouse&apiKey=*************************************').success(function(data) {

          $scope.bornes = data;

          $scope.markers=[];
          $scope.osloCenter=[];

          for (var i = 0; i < data.length; i++) {

              $scope.markers[i] = {
                  lat: data[i].position.lat,
                  lng: data[i].position.lng,
                  message: data[i].available_bikes,
                  focus: false,
                  draggable: false
              };
          }

          $scope.osloCenter = {
              lat: data[10].position.lat,
              lng: data[10].position.lng,
              zoom: 15
          };
      });
  }]);

这是我的 HTML :

<div ng-controller="toulouseVeloListCtrl">
    <leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet>
</div>

在 $scope.markers[i] 中，当我尝试显示 data[i].available_bikes 时，它会给我一个错误，但如果我尝试显示其他如data[i].name或data[i].address，没有问题。

谁能告诉我这里出了什么问题吗？

非常感谢!

Answer 1

弹出窗口的内容需要是一个字符串。

for (var i = 0; i < data.length; i++) {

    $scope.markers[i] = {
        lat: data[i].position.lat,
        lng: data[i].position.lng,
        message: "Available Bikes: " + data[i].available_bikes,
        focus: false,
        draggable: false
    };
}

https://jsfiddle.net/tombatossals/4PhzC/