8

Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. 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.

Sayed Mohd Ali
  • 2,156
  • 3
  • 12
  • 28
rashadb
  • 2,515
  • 4
  • 32
  • 57
  • Have you checked https://docs.angularjs.org/api/ng/directive/ngStyle ? – Makarov Sergey Sep 12 '16 at 09:01
  • @ Makarov Sergey I have looked at ngStyle but it's not clear to me whether that is the class or modifies a portion of the class and if so how those dots are connected. Also I'm not sure if ngStyle or ngClass is actually better or how they are different. Perhaps an example in an answer? :) – rashadb Sep 12 '16 at 09:04

4 Answers4

16

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

Hope this ng-style example will help 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+')' };
}
Sayed Mohd Ali
  • 2,156
  • 3
  • 12
  • 28
Mohit Tanwani
  • 6,608
  • 2
  • 14
  • 32
  • @ Loading.. great example. I'm going to try it out right now but I think I understand it. Please give me a few minutes with which to fiddle around with it. – rashadb Sep 12 '16 at 09:09
  • @rashadb sure you can try it, You just need to change background-image instead of color. – Mohit Tanwani Sep 12 '16 at 09:14
  • I'm not getting how to implement the url portion in JS correctly and therefore I'm getting the following error: ReferenceError: url is not defined – rashadb Sep 12 '16 at 09:22
  • Can you create jsfiddle ? – Mohit Tanwani Sep 12 '16 at 09:23
  • 1
    In function you can do it like this. return { 'background-image': 'url(' + value+')' }; – Mohit Tanwani Sep 12 '16 at 09:25
  • thanks for that detail. I'm almost there now. You may also want to note in your answer that you must delete the item 'background-color' from the class otherwise it will be replaced but the original property will show up first. The final issue, is that the function style() gets called multiple times with no end in sight or rhyme/reason from what I can tell. To be clear, I put a console.log message in the style() function to see when it was being hit and it's pretty clear that it's being hit multiple times instead of just once. – rashadb Sep 12 '16 at 09:36
  • It should be called 4 times as its in ng-repeat and it's having dynamic values as color everytime. – Mohit Tanwani Sep 12 '16 at 09:41
1

You can use ng-class : documation. If you want to do it in your directive check directive - attr : attr.

Itsik Mauyhas
  • 3,824
  • 14
  • 69
  • 114
  • @ Itsik Mauyhas, this looks useful but in my case I don't want to programmatically call classes; I just want to programmatically modify the single item within the class, background-image. It's not clear to me how to do this with ng-class. – rashadb Sep 12 '16 at 09:08
  • In this case look at the directive documation, adding and removing attr dynamically. – Itsik Mauyhas Sep 12 '16 at 09:10
  • I did take a close look at the difference between the two and ngclass is dynamically serving fixed classes where is ng-style is for setting elements of style dynamially. I believe ng-style is the correct one for my case. Thanks. – rashadb Sep 12 '16 at 10:05
0

You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]

For example:

<div class="offer-detail-image-div"
     [ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>

Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.

sofend
  • 647
  • 8
  • 17
-1

enter the size in textbox you can see box changes height and width

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Change the value of the input field:</p>

<div ng-app="" >

<input  ng-model="myCol" type="textbox">

<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>


</div>


</body>
</html>
SAI TEJA BATHULA
  • 1
  • 3