使用 document.getElementByClassName 和 ngif 指令更改 Image src答案

【问题标题】：Change Image src with document.getElementByClassName and ngif directive使用 document.getElementByClassName 和 ngif 指令更改 Image src
【发布时间】：2022-01-02 13:23:33
【问题描述】：

我正在尝试使用document.getElementByClassName 更改加载时的图标图像。这些图标会重复多次。该代码使用ngIf 根据用户执行的条件显示不同的图标。

<img class="viewlist_button_icon ng-scope" ng-if="fun.__inViewlist" src="source_file/image.png">
<!-- end ngIf: fun.__inViewlist -->
<!-- ngIf: !fun.__inViewlist -->

我已使用以下方法成功更改了图标：

var elems = document.getElementsByClassName("viewlist_button_icon ng-scope");
for (var i = 0; i < elems.length; i+= 1) {
    elems[i].src = "https://new_image.png";
}

我不知道如何更改由ng-if 控制的两个图标

图标 #1：ng-if="fun.__inViewlist"

图标 #2：ng-if="!fun.__inViewlist"

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

如果你使用 angular.js（不是 angular 2 及以上），请将图片地址放在 $scope 中，然后更改 $scope 以更改图片，如下所示：

$scope.myimg = '/img/icon1.jpg' ;

不要忘记在图片标签中使用 ng-src ：

<img ng-src="{{myimg}}">

ng-scr 很重要，src 不行

<img src="{{myVar}}"> [this will not wok]

【讨论】：