Change Image src with document.getElementByClassName and ngif directive

Question 1

I am trying to change icon images on load by using document.getElementByClassName. These icons are repeated several times. The code is using ngIf to show a different icon based on conditions performed by the user.

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

I have successfully changed the icons using the following:

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";
}

I cannot figure out how to change both icons controlled by the ng-if

icon #1: ng-if="fun.__inViewlist"

icon #2: ng-if="!fun.__inViewlist"

Any help would be appreciated. Thank you.

Question 2

if you use angular.js (not angular 2 and above) , place the image address in $scope and then change the $scope to change the image like this :

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

do not forget to use ng-src in image tags :

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

ng-scr is important , src will not work

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

Ali Zolfaghar · Answer 1 · 2021-11-24T06:20:57

if you use angular.js (not angular 2 and above) , place the image address in $scope and then change the $scope to change the image like this :

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

do not forget to use ng-src in image tags :

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

ng-scr is important , src will not work

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

Change Image src with document.getElementByClassName and ngif directive

In other languages

This page is in other languages

Popular in the category