Question

我想通过点击按钮在屏幕上画一个圆圈。

这应该被扩展为在特定的地方绘制其中一些但是现在我只需要一个。

JS代码（问题在于它写的是$ scope.draw = function（ncircs）...）

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>

我的问题是，当我使用输入按钮的Id单击绘图按钮作为参数时，没有任何作用...我已经尝试了所有内容......如$ NumQuest，NumQuest.value等等。 ..

任何帮助都非常有价值......

布鲁诺

Answer 1

对于与我有同样问题的人，请点击此处修复：

这个想法是你通过ID获取元素来使用JS方面的值：

$scope.draw=function(val)
        {
            val = document.getElementById("NumQuest").value;
            $scope.circles.push(JSON.parse('{\"x\":'+val+', "y": 220, "r":30}'));
        };

如果您只是使用以下所有其他内容将按预期工作：

绘图

在HTML方面!!简单干净！

使用AngularJS单击按钮绘制图形

1 个答案: