Not able to get result of Angularjs being displaying as expression in html page

Question

I am newbie in Angularjs and I am trying to work on a google maps application using Angularjs. I am able to generate the expected results apart from one thing. When I included {{loc.co1}} to be printed as a table column. It is not showing the result and giving a null. I searched a lot and found that my appraoch is correct. The results are available in the javascript but then when accessing from html, they dont show up. Could you please help me with this.

The input is when we drawing a rectangle on the map and click on submit, the coordinate values should go into the table.

Also, below is a link of the work I did. Sorry for not following the 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 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);


});


});

Yes. I am supposed to retrieve the location coordinates from the javascript to be displayed in the table. I appreciate any help. Thank you...... — Spandana
– Spandana, Commented Nov 13, 2016 at 14:32
Hi, I realized that the plnkr code is not showing output and made some changes in it for the map to be displayed. Also, when I am trying to bind using ng-model, it is saying that the directive is not available. Could any one please help me on this. Thank you in advance. — Spandana
– Spandana, Commented Nov 14, 2016 at 21:25

Sajeetharan · Accepted Answer · 2016-11-15 01:35:47Z

1

You need to use ng-model in input,

 <input type="text" id="text" ng-model="location" />

I have made some necessary changes, no it works

DEMO

answered Nov 15, 2016 at 1:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spandana Over a year ago

Thank you Sajeetharan.... This is working now. I just realized that we need a two way binding in such scenarios.

Collectives™ on Stack Overflow

Not able to get result of Angularjs being displaying as expression in html page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related