CODEWITHSUNDEEP
javascriptjqueryangularjsfrontend
Mohammad Denny
Mohammad Denny

Reputation: 11

How to add jquery addClass() method to element ng-repeat AngularJS

I made a text editor summernote for an article, and after that I read it with modalbootstrap and angularJS ng-repeat in html element to get data from json api my php, its works.

but the problem with the article content is that there is an image and I want to add the 'img-fluid' class so that the image is responsive.

I have tried adding classes with the jquery addClass method to element html, and it works with code like this.

point assume example:

my script.js

$('img').addClass('img-fluid');

result element img without ng-repeat works.

<div class='container'>
<div class='onlyDiv'>
<p>
<img src='bla.jpg' class='img-fluid' <--works>
</p>
</div>
</div>

but if the img element with the ng-repeat directive doesn't work

results addClass() doesn't work.

<div class='container'>
<div class='divWithNgRepeat' ng-repeat='artcl.content | unsafe'>
<p>
<img src='bla.jpg'  <--no class added>
</p>
</div>
</div>

please help me master, thanks

Upvotes: 0

Views: 101

Answers (2)

Mohammad Denny
Mohammad Denny

Reputation: 11

yess bro , I have successfully solved the problem. as @ symphonic's says jquery is more executed before the ng-repeat directive finishes loading the data. I tried the code below and it worked

$(document).ready(function(){
  $("#myBtn").click(function(){
    $("#myModal").modal("show");
  });
  $("#myModal").on('shown.bs.modal', function(){
    $('img').addClass('img-fluid');
  });
});

Upvotes: 0

Symphonic
Symphonic

Reputation: 365

First, try change the "ng-repeate" to "ng-repeat". If that's not the problem, then the jQuery line may be running before than ng-repeat loop. In this case you need to use something like:

angular.element(document).ready(function () {
 $('img').addClass('img-fluid');
});

Upvotes: 0

Related Questions