Angular JS - Conditional inline style with dynamic data

Question

I would like to display styles which depend on dynamic values conditionally. For example:

<div ng-style="!obj.prop ? 'width : 0;' : 'width: {{ obj.val1 / obj.val2 }}%;'"></div>

Is this possible to do using ng-class or ng-style?

You don't need interpolation {{ and }} inside ng-style — Tushar
– Tushar, Commented Mar 21, 2016 at 4:33
Possible duplicate of Angular ng-style with a conditional expression — Khalid Hussain
– Khalid Hussain, Commented Mar 21, 2016 at 4:56

Cosmin Ababei · Accepted Answer · 2016-03-30 16:10:05Z

1

Use this refactored version and you would be fine:

<div ng-style="{ 'width' : !obj.prop ? 0 : obj.val1 / obj.val2 + '%' }"></div>

Your problem was that you were using interpolation ({{ and }}) inside a directive which requires an expression.

As a good rule of thumb, remember that most built-in AngularJS directives require an expression and not interpolation. A few directives which work with interpolation: ngHref, ngSrc.

edited Mar 30, 2016 at 16:10

answered Mar 21, 2016 at 6:03

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Angular JS - Conditional inline style with dynamic data

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related