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

Question

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

mz3 · Accepted Answer · 2015-07-16 17:32:18Z

2

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;">

edited Jul 16, 2015 at 17:32

answered Jul 16, 2015 at 17:26

mz3

1,35412 silver badges28 bronze badges

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

2 Comments

Chris Chevalier Over a year ago

why doesn't this work with "top" and "bottom" css variables?

mz3 Over a year ago

Method #1 or #3 should work that way. If you post your code I can give more detail.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related