Set a inline dynamic css width attribute with angular expression

Canvas Canvas Tips
,
#1

Hi All,
I have come across a handy directive to allow inline style if the angular condition is true.
This will fix any issues with style you have in IE! compared to other browsers.
USE the following ng-style=“{‘width’:variable ? ‘100%’:’20%’}

Do NOT use expression in the style attribute (i.e
style=" width:{{variable}}%"
or
style=" width:{{var ? '':'' }}%"

3 Likes
#2

There is another directive you can use called
data-ng-attr-style
EXAMPLE:
data-ng-attr-style=" {{ row.cells.length > 1 ? ‘width:’+(100/row.cells.length)+’%’ : ‘width:100%’ }}"

In most cases ng-attr-style will do the job!
Thanls
Ilia

2 Likes
#3

Hi @ishapiro,

For dymanically setting a style you should use ng-style, i.e. ng-style="{'width': someVariable + 'px'}"

You can prefix any directive with data- (i.e. data-ng-model) and it will work although I don’t think it is generally recommended.

#4

Ok got it.
Will update.

Thanks Tim, for clarifying

Ilia