Migrating Conditional Styling From jQuery to AngularJS

Question

I'm making my first Angular app and am struggling with the thought processes behind conditionally styling the DOM in AngularJS.

I was previously doing this in jQuery like so:

containerWidth = lineWidth / numberOfObjects; $container.css('width',containerWidth);

So if there's 1 object the width is 100% and if there are 5 the width becomes 20%.

I'm unsure whether to do this in link, inside a directive or in the controller itself?

DOM manipulation is basically done in Directive, However, you can use jquery syntax inside controler. eg .$("your selector").css() in controler — Vishu238
– Vishu238, Commented Aug 27, 2015 at 10:29
Possible duplicate: stackoverflow.com/questions/20287241/… — user1334319
– user1334319, Commented Aug 27, 2015 at 10:31

user1334319 · Accepted Answer · 2015-08-27 10:30:41Z

2

Please see ng-style

Example:

<div ng-style="divStyle" />

and JS:

$scope.divStyle = {'width' : (lineWidth / numberOfObjects) + 'px;' };

(I don't know where lineWidth comes from... but that's the idea)

answered Aug 27, 2015 at 10:30

user1334319

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

2 Comments

Does the JS part go in the controller?

Yes, the controller that renders the part of the view you're interesting in dynamically styling