CODEWITHSUNDEEP
javascripthtmlcssangularjs
Chris Chevalier
Chris Chevalier

Reputation: 650

How can you dynamically bind an images x,y and width to variables using angular JS?

I would like to be able to manipulate some images around the screen but can't get it to work properly.

I'v tried using

$scope.data[i].style="{'width': '" + $scope.imageScale + "px'}"

in the controller, called when imageScale changes, with 

<div class = "image" ng-repeat="image in data">
    <img ng-src={{image.Filename}} ng-style="image.style">
</div>

located in the HTML.

Thanks

Upvotes: 1

Views: 249

Answers (1)

mz3
mz3

Reputation: 1344

Your controller code isn't going to bind the style property like you intend. This is only going to run once, and won't be updated when $scope.imageScale changes.

$scope.data[i].style="{'width': '" + $scope.imageScale + "px'}"

Instead, you can do:

<img ng-src={{image.Filename}} ng-style="{'width':$imageScale+'px'}">

Or:

<img ng-src={{image.Filename}} width="{{$imageScale}}">

Or:

<img ng-src={{image.Filename}} style="width:{{$imageScale}}px;">

Upvotes: 2

Related Questions