I am trying to create a button that, when clicked, will draw a circle on the screen.
Eventually, I plan to expand this functionality to draw multiple circles in specific locations, but for now, I just need it to draw one circle.
The issue seems to be with the JS code where $scope.draw=function(ncircs) is written.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.graph = {'width': 1000, 'height': 1000};
$scope.circles = [
JSON.parse("{\"x\": 85, \"y\": 20, \"r\":15}"),
{"x": 20, "y": 60, "r":20},
{"x": 18, "y": 10, "r":40}
];
$scope.draw=function(val)
{
$scope.circles.push(JSON.parse('{\"x\":'+val+', "y": 220, "r":30}'));
};
$scope.rectangles = [
/* {'x':220, 'y':220, 'width' : 300, 'height' : 100},
{'x':520, 'y':220, 'width' : 300, 'height' : 100}
*/
];
}
);
angular.bootstrap(document.getElementById('body'), ["app"]);
HTML code:
<div id="body">
<div ng-controller="MainCtrl">
<label>Num questões:</label>
<input Id="NumQuest" class="span3" style="margin: 0pt auto;" type="text" placeholder="Num questões..." data-provide="typeahead" data-items="1"
/>
<p><button ng-click="draw(NumQuest)">Draw</button></p>
<svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}">
<circle ng-repeat="circle in circles"
ng-attr-cx="{{circle.x}}"
ng-attr-cy="{{circle.y}}"
ng-attr-r="{{circle.r}}">
</circle>
<rect ng-repeat="rect in rectangles"
ng-attr-x="{{rect.x}}"
ng-attr-y="{{rect.y}}"
ng-attr-width="{{rect.width}}"
ng-attr-height="{{rect.height}}">
</rect>
</svg>
</div>
</div>
I'm having trouble getting the draw button to work properly. When using the Id of the input button as a parameter, nothing happens. I've tried different methods like $NumQuest, NumQuest.value, etc., but none seem to work...
Any help would be greatly appreciated...
Bruno