如何用角度js中图像的最小高度设置列表中图像的高度?

时间:2017-08-09 04:35:40

标签: javascript html angularjs

我正在研究角度js,我在将图像的高度设置为div中的最小高度时遇到问题...顺便说一句,我在li中使用ng-repeat。这是我的代码:

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>
        `
    }
})

我想要的是例如:

  

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

运行代码后,img高度将变为90

  

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

我该怎么做? 另外,如何在jquery中选择元素中的角js中选择元素? 感谢您的回复。

1 个答案:

答案 0 :(得分:1)

这会选择所有带有&#39; .my-image&#39;。

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

然后找到最低限度:

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

然后将高度设置为所有元素:

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

如果它没有工作,请在加载html后使用$ timeout来执行这些操作:

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