如何将 jquery addClass() 方法添加到元素 ng-repeat AngularJS

Posted 2023-05-09

【中文标题】如何将 jquery addClass() 方法添加到元素 ng-repeat AngularJS

【英文标题】：How to add jquery addClass() method to element ng-repeat AngularJS

【发布时间】：2020-10-29 12:11:08

【问题描述】：

我为一篇文章制作了一个文本编辑器summernote，然后我用 modalbootstrap 和 angularJS ng-repeat 在 html 元素中阅读它以从我的 php 的 json api 获取数据，它的工作原理。

但是文章内容的问题是有一张图片，我想添加'img-fluid'类，让图片有响应性。

我尝试使用 jquery addClass 方法将类添加到元素 html，并且它适用于这样的代码。

点假设示例：

我的脚本.js

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

没有 ng-repeat 的结果元素 img 有效。

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

但是如果带有 ng-repeat 指令的 img 元素不起作用

结果 addClass() 不起作用。

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

请高手帮帮我，谢谢

【参考方案1】：

首先，尝试将“ng-repeat”更改为“ng-repeat”。如果这不是问题，那么 jQuery 行可能在 ng-repeat 循环之前运行。在这种情况下，您需要使用类似：

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

【讨论】：

是的兄弟，我已经成功解决了这个问题。正如@symphonic 所说，jquery 在 ng-repeat 指令完成加载数据之前执行得更多。 $("#myModal").on('shown.bs.modal', function() $('img').addClass('img-fluid'); );

【参考方案2】：

是的，兄弟，我已经成功解决了这个问题。正如@symphonic 所说，jquery 在 ng-repeat 指令完成加载数据之前执行得更多。我尝试了下面的代码，它工作了

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