Question

我正在搞乱谷歌地图API并使用角度，我遇到了将API中的数据绑定到变量并使用ng-repeat正确显示的问题。 ng-repeat应该列出place对象的name属性，但除非我输入两次相同的zipcode，否则它不会这样做。这是html：

<!DOCTYPE html>
<html ng-app = "openApp">
  <head>
    <meta charset="utf-8">
    <title>Open Sesame</title>
    <script src = "http://maps.googleapis.com/maps/api/js?     key=AIzaSyArO1n-5w8xxPblR_aDxV6Ul1VLik3_pRY&libraries=places"></script>
    <script src = "vendors/angular/angular.min.js"></script>

    <script src = "assets/scripts/composite.all.min.js"></script>
    <link rel = "stylesheet" href = "assets/styles/style.css" />
  </head>
  <body ng-controller = "MainController as main">
    <h1>Is it open?</h1>

    <!-- <button ng-click = ""></button> -->
    <div id = "googleMap"></div>
    <form>
      <input type = "text" ng-model = "main.zipcode"/>
      <input type = "submit" ng-click = "main.enterZip()" />
    </form>

    <div id = "displayInfo">
      <ul>
        <li ng-repeat = "item in main.openPlaces">
          test {{item.name}}
        </li>
      </ul>
    </div>

  </body>
</html>

这是客户端javascript：

angular.module('openApp', [])
  .controller('MainController', ['$http', function($http){
    var vm = this;
    vm.latitude;
    vm.longitude;

    vm.openPlaces = [];
    initialize();
    vm.enterZip = function(){
      $http.get('/zipcodeApi/'+ vm.zipcode)
        .then(function(response){
          vm.latitude = response.data.lat;
          vm.longitude = response.data.lng;
          initialize();
        })
    }


      function initialize(){
          var mapLocation = new google.maps.LatLng(vm.latitude,     vm.longitude);

          var openNow = [];

          var mapProp = {
            center: mapLocation,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new  google.maps.Map(document.getElementById("googleMap"), mapProp);

          var placesRequest = {
            location: mapLocation,
            radius: '2000',
            types: ['restaurant'],
            keyword: 'restaurant',

          };

          var service = new google.maps.places.PlacesService(map);

          service.nearbySearch(placesRequest, function(results, status)  {
            if(status == google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                var listedHours = results[i].opening_hours;
                if(typeof listedHours != 'undefined' &&  listedHours.open_now === true){
                  openNow.push(results[i]);
                  var place = results[i];
                  var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                  });
                }
              }
            }
            vm.openPlaces = openNow;
          })//closes nearbySearch()

      }
  }]);

Answer 1

MainController可以工作，因为你在JS文件中命名了你的控制器MainController。这与MainController作为主要工作的原因相同。

ng-repeat在提交按钮被击中两次后才能正常工作

1 个答案: