Angularjs - Unable to apply ng-style to img tag (using ng-repeat)

Question

I'm using Angularjs in order to display some images in the DOM, and apply some style to them (dim the background). It seems I am unable to apply ng-style to the img tag. What is the reason to that?

Fiddle here.

HTML:

<div ng-controller="MyController">
    <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
          <div class="rel">
             <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}"> 
          <li class="del">button</li><li class="getLink">get link</li>
          </div>
    </div>
  </div>   
</div>

CSS:

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

It doesnt work, the "dim" effect is not applied to the image. — Alex, Apr 18 '16 at 10:19
I want to darken the image, the dark cover should have transparency @mJunaidSalaat — Alex, Apr 18 '16 at 10:44
well it turns ng-style was working just fine you had thois css problem. — M. Junaid Salaat, Apr 18 '16 at 11:18

Maths RkBala · Accepted Answer · 2016-04-18T10:43:50.710

Please try the following:

HTML:

<div ng-controller="MyController">
<div class="row">
    <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
      <div class="rel">
        <div class="cover-img">
          <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover">
        </div> 
      <li class="del">button</li><li class="getLink">get link</li>
      </div>
</div>

CSS:

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

.cover-img{
   position:relative;
}
.cover-img:before{
   content:'';
   background: rgba(69, 71, 94, 0.53);
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   top:0;
   width:100%;
   height:100%;
}

This has nothing to do with angular. If you use `ng-style` here it would also work. — M. Junaid Salaat, Apr 18 '16 at 11:18

score 0 · Answer 2 · answered Apr 18 '16 at 10:24

I don't think that how ng-style works. You can see example here and here.

Try this:

In html:

<img ng-style="yourStyle">

In controller:

$scope.yourStyle =
{
    'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
    'background-size': 'cover'
}

Hope this help.

Angularjs - Unable to apply ng-style to img tag (using ng-repeat)

2 Answers2