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.
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]