0

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?

Scott Schwartz
  • 1
  • 1
    You don't need interpolation `{{` and `}}` inside `ng-style` – Tushar Mar 21 '16 at 04:33
  • Possible duplicate of [Angular ng-style with a conditional expression](http://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression) – Khalid Hussain Mar 21 '16 at 04:56

1 Answers1

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.

Cosmin Ababei
  • 7,003
  • 2
  • 20
  • 34