javascript - Not able to get result of Angularjs being displaying as expression in html page -
i newbie in angularjs , trying work on google maps application using angularjs. able generate expected results apart 1 thing. when included {{loc.co1}} printed table column. not showing result , giving null. searched lot , found appraoch correct. results available in javascript when accessing html, dont show up. please me this.
the input when drawing rectangle on map , click on submit, coordinate values should go table.
also, below link of work did. sorry not following format properly.
http://plnkr.co/edit/kh5cujabvg2rpjuebgyt?p=info
===========code =================== <!doctype html> <html lang="en"> <head> <meta charset="iso-8859-1"> <title>scientist entry map</title> <link rel="stylesheet" href="scientistmappage.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskx3iaeniogmqchp8opvby3mi7ce34nwjpbiwvthfgywqs9jwhdvrnpkkhjg7" crossorigin="anonymous"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=aizasydvgni2snxem8cu5y-dxk0y1ep9iv3soc4&libraries=drawing,geometry,places" async defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> <!-- <script type="text/javascript" src="lodash.min.js"></script> --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <!-- <script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script> --> <!-- <script type="text/javascript" src="angular.min.js"></script> --> <!-- <script type="text/javascript" src="angular-google-maps.min.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.3.3/angular-google-maps.min.js"></script> --> <script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="ng-map.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="mapcontroller" class="form-control"> <table> <tr><td><h1>map selecting places</h1></td></tr> <tr><td> <input id="placesearch" class="form-control" type="text" placeholder="search box"> <div id="map"></div> <button class="btn btn-primary" type="reset" id="btnresetrect" placeholder="resetmap">reset map</button> <button class="btn btn-primary" type="submit" id="btnsubmitrect">submit location</button> <input type="hidden" id="txtcoords"> <input type="text" id="text" value="{{locationsdata[0].co1}}"/> </td> <td> <table class="table table-striped table-bordered"> <tr> <th>place </th> <th>coordinates-1 </th> <th>coordinates-2 </th> <th>coordinates-3 </th> <th>coordinates-4 </th> <th>delete</th> </tr> <tr ng-repeat="loc in locationsdata"> <td>to added</td> <td>{{loc.co1}}</td> <td>{{loc.co2}}</td> <td>{{loc.co3}}</td> <td>{{loc.co4}}</td> <td><button type="submit" class="btn btn-primary" id="deletelocation">delete</button></td> </tr> </table> </td></tr> </table> </div> </body> </html> // code goes here var myapp = angular.module('myapp',[]); myapp.controller('mapcontroller',function($scope) { $scope.rectshape; $scope.locationsdata =[]; var mapoptions = { zoom: 4, center: new google.maps.latlng(25, 80), maptypeid: google.maps.maptypeid.roadmap }; $scope.map = new google.maps.map(document.getelementbyid("map"), mapoptions); $scope.drawingmg = new google.maps.drawing.drawingmanager({ drawingmode: google.maps.drawing.overlaytype.rectangle, drawingcontrol: true, drawingcontroloptions: { position: google.maps.controlposition.top_center, drawingmodes: [ //google.maps.drawing.overlaytype.marker, //google.maps.drawing.overlaytype.circle, google.maps.drawing.overlaytype.polygon, //google.maps.drawing.overlaytype.polyline, google.maps.drawing.overlaytype.rectangle ] }, polygonoptions: { fillcolor: '#bcdcf9', fillopacity: 0.5, strokeweight: 2, strokecolor: '#57acf9', clickable: false, editable: true, draggable : true, zindex: 1 }, rectangleoptions: { fillcolor: 'red', fillopacity: 0.5, strokeweight: 2, strokecolor: 'red', clickable: true, editable: true, draggable:true, zindex: 1 } }); var c1,c2,c3,c4; google.maps.event.addlistener($scope.drawingmg, 'rectanglecomplete', function(rectangle) { //document.getelementbyid('info').innerhtml += "rectangle points:" + "<br>"; $scope.rectshape= rectangle; c1 = rectangle.getbounds().getnortheast().lat() +"," +rectangle.getbounds().getnortheast().lng(); c2 = rectangle.getbounds().getnortheast().lat()+"," +rectangle.getbounds().getsouthwest().lng(); c3 = rectangle.getbounds().getsouthwest().lat()+"," +rectangle.getbounds().getnortheast().lng(); c4 = rectangle.getbounds().getsouthwest().lat()+"," +rectangle.getbounds().getsouthwest().lng(); document.getelementbyid("txtcoords").innerhtml = c1 +"\n"+c2+"\n"+c3+"\n"+c4; // alert(document.getelementbyid("txtcoords").innerhtml.tostring()); //document.getelementbyid("info").innerhtml += ne +"," +sw+ "<br>"; }); $scope.drawingmg.setmap($scope.map); $scope.clearbutton = document.getelementbyid("btnresetrect"); $scope.map.controls[google.maps.controlposition.bottom_center].push($scope.clearbutton); $scope.submitbutton = document.getelementbyid("btnsubmitrect"); $scope.submitbutton.onclick = function(){ alert(c1 +""+c2); //$scope.locationsdata =[]; $scope.locationsdata.push({ co1 : c1, co2: c2, co3: c3, co4: c4 }); alert($scope.locationsdata.length); // $scope.locationsdatac1 = c1; // $scope.locationsdatac2 = c2; // $scope.locationsdatac3 = c3; // $scope.locationsdatac4 = c4; alert($scope.locationsdata[0].co1); }; console.log("outside click"); $scope.clearbutton.onclick = function(){ if($scope.drawingmg.getdrawingmode()){ $scope.shape.setmap(null); //$scope.shape.setbounds(null); //$scope.drawingmg.getdrawingmode().setmap(null); } }; $scope.placesearch = document.getelementbyid("placesearch"); $scope.searchbox = new google.maps.places.searchbox($scope.placesearch); $scope.map.controls[google.maps.controlposition.top_left].push($scope.placesearch); $scope.map.addlistener('bounds_changed', function () { $scope.searchbox.setbounds($scope.map.getbounds()); }); $scope.markers = []; // listen event fired when user selects prediction , retrieve // more details place. $scope.searchbox.addlistener('places_changed', function () { $scope.places = $scope.searchbox.getplaces(); if ($scope.places.length == 0) { return; } // clear out old markers. $scope.markers.foreach(function (marker) { marker.setmap(null); }); $scope.markers = []; var center; $scope.places.foreach(function (place) { if (!place.geometry) { console.log("returned place contains no geometry"); return; } var icon = { url: place.icon, size: new google.maps.size(71, 71), origin: new google.maps.point(0, 0), anchor: new google.maps.point(17, 34), scaledsize: new google.maps.size(25, 25) }; // create marker each place. $scope.markers.push(new google.maps.marker({ map: $scope.map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // geocodes have viewport. bounds = place.geometry.viewport; } else { bounds = place.geometry.location; } }); $scope.map.fitbounds(bounds); }); });
you need use ng-model in input,
<input type="text" id="text" ng-model="location" /> i have made necessary changes, no works
Comments
Post a Comment