无法获得Angularjs的结果在html页面

时间：2016-11-13 04:56:20

标签： javascript html angularjs google-maps angular-ngmodel

我是Angularjs的新手，我正在尝试使用Angularjs处理谷歌地图应用程序。除了一件事，我能够产生预期的结果。当我将{{loc.co1}}包含在要作为表格列打印时。它没有显示结果并给出null。我搜索了很多，发现我的appraoch是正确的。结果可以在javascript中获得，但是当从html访问时，它们不会显示出来。你能帮我解决这个问题。

输入是当我们在地图上绘制一个矩形并单击提交时，坐标值应该进入表格。

另外，下面是我所做工作的链接。很抱歉没有正确遵循格式。

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 and 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 and 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 for 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 be 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 do 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 for the event fired when the user selects a prediction and retrieve
// more details for that place.
$scope.searchBox.addListener('places_changed', function () {
    $scope.places = $scope.searchBox.getPlaces();

    if ($scope.places.length == 0) {
        return;
    }

    // Clear out the 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 a marker for 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) {
            // Only geocodes have viewport.
            bounds = place.geometry.viewport;
        } else {
            bounds = place.geometry.location;
        }
    });
    $scope.map.fitBounds(bounds);


});


});

1 个答案:

答案 0 :(得分：1)

您需要在输入中使用$isbnn = $_POST['isbnn']; $result2=myRestapiGET($isbnn); echo $result2; 

ng-model

我做了一些必要的改变，没有它的作用

<强> DEMO

相关问题
最新问题