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

Question

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

Symphonic · Accepted Answer · 2020-07-09 02:59:23Z

0

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');
});

answered Jul 9, 2020 at 2:59

Symphonic

3651 gold badge4 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Denny Over a year ago

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. $("#myModal").on('shown.bs.modal', function(){ $('img').addClass('img-fluid'); });

Mohammad Denny · Accepted Answer · 2020-07-20 18:04:26Z

0

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');
  });
});

answered Jul 20, 2020 at 18:04

Mohammad Denny

113 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related