rashadb rashadb - 2 months ago 16
CSS Question

How to change a CSS property dynamically in Angular

Right now I have a background image url hard coded into CSS. I'd like to dynamically choose a background image using logic in Angular. Here is what I currently have:

HTML

<div class="offer-detail-image-div"><div>


CSS

.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}


As you can see, the background-image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image url. I really don't know where to begin. I do not know JQuery. Thank you.

Answer

You can use ng-style to dynamically change a CSS class property using AngularJS.

Hope this ng-style example will helps you to understand the concept at-least.

More information for ngStyle

var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
      $scope.style = function(value) {
          return { "background-color": value };
      }
}]);
ul{
  list-style-type: none;
  color: #fff;
}
li{
  padding: 10px;
  text-align: center;
}
.original{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
  <div class="container">
    <div class="row">
      <div class="span12">
        <ul>
          <li ng-repeat="color in colors">
            <h4 class="original" ng-style="style(color)"> {{ color }}</h4>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>

Edit-1

You can change the background-image: url by following way.

$scope.style = function(value) {
   return { 'background-image': 'url(' + value+')' };
}