ng-repeat 直到两次点击提交按钮后才起作用答案

【问题标题】：ng-repeat not working until after submit button is hit twiceng-repeat 直到两次点击提交按钮后才起作用
【发布时间】：2016-07-15 17:19:50
【问题描述】：

我弄乱了 google maps API 并使用了 angular，我遇到了将数据从 API 绑定到变量并使用 ng-repeat 正确显示它的问题。 ng-repeat 应该列出地点对象的名称属性，但除非我输入相同的邮政编码两次，否则它不会这样做。这是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()

      }
  }]);

【问题讨论】：

hmmm...我已经复制了你的大部分代码并模拟了谷歌地图服务正在做的事情，我没有看到任何错误的代码。最好的办法是打开浏览器开发工具，在 enterZip().then() 成功函数和 service.nearbySearch() 函数中都设置一个断点，以查看 openNow 数组是否第一次被填充。

标签： javascript angularjs google-maps http angularjs-ng-repeat

【解决方案1】：

MainController 可以工作，因为您在 JS 文件中将控制器命名为 MainController。这与 MainController 作为 main 不起作用的原因相同。

【讨论】：