AngularJs dynamic styling using ng-style

Question

I am using below syntax but I am not able to implement it. I want to change margin-left dynamically, depending on the div class.

ng-style="{ 'margin-left: 120px' :col-xs-12 || 'margin-left: 400px' :col-lg-8 col-md-8 col-sm-8 }"

Answer 1

First of all, try to avoid inline styling. Create a class with all the required attributes and the syntax to apply CSS dynamically based on conditions is :

CSS:

.trial{
  margin-left: 120px;
}
.trial1{
  margin-left: 400px;
}

HTML

ng-class="{'trial': col-xs-12 || 'trial1': col-lg-8 col-md-8}"

I somehow feel that you need to write something in your controller to find device resolution, But first, give this a try and let me know if it works or not.