Angular model change not reflected to CSS inline style

Question

Here is a clickable div. Once it clicked, it's supposed to change its position (defined by an inline CSS rule). The callback function is successfully invoked.

Problem: model change does not affect the inline CSS. Although initial values works well.

View:

<div data-ng-repeat="item in items"
     data-ng-click="item.clicked()"
     data-ng-style="{'left': '{{item.left}}', 'width': '{{item.width}}', 'top': '0' }">
</div>

Controller:

var item = {
    left: '30%',
    width: '20%'
};

(function(item) { // because inside a loop
    item.clicked = function() {
        console.log("item clicked");
        item.width = '100%';
        item.left = '0%';
    };
})(item);

$scope.items.push(item);

Angular 1.4

Buh Buh · Accepted Answer · 2016-09-28 12:56:05Z

2

You just don't need the extra {{

data-ng-style="{'left': item.left, 'width': item.width, 'top': '0' }"

answered Sep 28, 2016 at 12:56

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

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

Comments

Matheno · Accepted Answer · 2016-09-28 12:52:15Z

0

As said in the documentation of ng-style

Known Issues: You should not use interpolation in the value of the style attribute, when using the ngStyle directive on the same element. See here for more info.

Example how to use

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

answered Sep 28, 2016 at 12:52

Matheno

4,2026 gold badges40 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angular model change not reflected to CSS inline style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related