Wie wird die Höhe der Bilder in der Liste durch die kleinste Höhe des Bildes in eckigen js eingestellt?

Question

Ich studiere gerade eckige js und ich habe ein Problem bei der Einstellung der Höhe der Bilder durch die kleinste Höhe in der Div ... Übrigens verwende ich ng-repeat in li. Dies ist mein Code:

app.directive("cardListStyle01",function(){ 
    return { 
     template: ` 
      <li class='contentContainer02 card' ng-repeat='d in data'> 
       <div class='imageBlock'> 
        <div class='logo'><img src='/images/img0{{$index%5+1}}.jpg' alt=''></div> 
        <h3 class='cardTitle cWhite'>{{d.name}}</h3> 
       </div> 
       <div class='cardContentBlock'> 
        <p class='cardPar'>{{d.employeeNum}}</p> 
       </div> 
      </li> 
     ` 
    } 
}) 

Was ich will, ist zum Beispiel:

img1 height = 200px. img2 height = 100px. img3 height = 90px. img4 height = 260px. img5 height = 120px.

nach dem Code ausgeführt wird, wird die img Höhe 90 werden

img1 height = 90px img2 height = 90px img3 height = 90px img4 height = 90px img5 height = 90px

wie kann ich das tun? Auch, wie Element in eckigen js auswählen wie Element in jquery auswählen? Vielen Dank für Ihre Antwort.

Answer 1

Damit werden alle Objekte mit der Klasse '.my-image' ausgewählt.

var images = document.querySelectorAll('.my-image'); 

Dann ein Minimum finden:

var minHeight = images[0].offsetHeight; 
images.forEach(function(item){ 
    minHeight = Math.min(minHeight, item.offsetHeight) 
}) 

Dann setzen Sie einfach die Höhe auf alle Elemente:

images.forEach(function(item){ 
    angular.element(item).css({ 
     height: minHeight + 'px' 
    }); 
}) 

Wenn es nicht verwenden $ timeout funktioniert diese Manipulationen nach html auszuführen ist geladen:

$timeout({ 
    // all the code above 
})