javascript - ng-repeat not working until after submit button is hit twice -
i messing google maps api , using angular, , having issue binding data api variable , displaying correctly ng-repeat. ng-repeat supposed list name property of place objects, not unless enter same zipcode twice. here 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 main"> <h1>is 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>
and here client side 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) { (var = 0; < 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() } }]);
maincontroller work because named controller maincontroller in js file. , that's same reason maincontroller main won't work.
Comments
Post a Comment