CODEWITHSUNDEEP
angularjssnap.svg
SajaWal NaWaz
SajaWal NaWaz

Reputation: 115

I'm trying to make A snap SVG rect with Angular JS

This is my code, having difficulties in changing it's width & height.. but it doesn't change it value with the new value. I want to change the height & width of the rect on run time.

 <div ng-app='app'>
    <div ng-controller="ctrlSizing">
        <label id="wid" style="visibility: hidden">Width: <input ng-model="wid" type="number" placeholder="How about 100"></label>
        <label id="hei" style="visibility: hidden">Height: <input ng-model="hei" type="number" placeholder="How about 100"></label>
        <div id="circle">
            <svg id="SVG" visibility="hidden" onclick="cInput()" style="height: 300; width: 300; position:absolute; left: 0px;top: 50px;">

            </svg>
        </div>
    </div>
</div>

var app = angular.module('app', []);

app.controller('ctrlSizing', function($scope) {
    $scope.$watch('wid', function (newVal, oldVal) {
        if (newVal === oldVal) {
            var s = Snap("#SVG");
            $scope.rectangle = s.rect(150, 150, 0, 0);
            //console.log($scope.circle);
        } else {
            $scope.rectangle.animate({w: newVal}, 500);
            //$scope.rectangle.animate({h: newVal}, 500);
        }
    });
});
    app.controller('ctrlSizing', function($scope) {
    $scope.$watch('hei', function (newval, oldval) {
        if (newval === oldval) {
             var s = Snap("#SVG");
             $scope.rectangle = s.rect(150, 150, 70, 50);
             //console.log($scope.circle);
        } else {
                $scope.rectangle.animate({h: newVal}, 500);
            }
    });
});

Upvotes: 2

Views: 1824

Answers (1)

yazaki
yazaki

Reputation: 1632

I guess this is what you want.

HTML

<div ng-app ng-controller="myctrl">
    <div>width:<input ng-model="width"></div>
    <div>height:<input ng-model="height"></div>
</div>

javascript

function myctrl($scope){

    $scope.width = 100;
    $scope.height = 100;
    var s = Snap();
    var rec = s.rect(0, 0, 100, 100);

    $scope.$watch('width', function(value){
        rec.animate({width: value}, 500, mina.easein);
    });
    $scope.$watch('height', function(value){
        rec.animate({height: value}, 500, mina.easein);
    });

}

jsfiddle is here.

Upvotes: 2

Related Questions