angualr js - 一旦达到溢出就停止显示图像

Question

我有一堆图像，通过mvc fileresult和角度ng-src将im提供（从外部源im到其他地方）。

例如。

<div ng=repeat="img in Images"> 
     <img ng-src={{img.path}} style="height:100px;width:auto" /> 
</div>` 

在这种情况下，我知道img.path总是去外部c＃mvc并返回一个文件流到内容。

我希望只适合在屏幕上显示图像的某个“总和”宽度，以便我没有显示图像，例如我是否在父div中使用“overflow：hidden”。

有没有一种方法可以设置ng-repeat继续，直到下一个图像溢出（从而完全防止溢出）？正在调整图像的大小，以使它们的高度全部设置为100px，并且宽度按比例缩放以满足此大小。 `

我想下面的指令会做的伎俩，但它似乎重新调整图像出于某种原因..

App.directive('styleParent', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elem, attr) { 
      elem.on('load', function() { 
       var w = $(this).width(), 
        h = $(this).height(); 

       var xPos = angular.element(this).prop('offsetLeft'); 
       xPos += w; 

       var div = elem.parent(); 
       var d_width = div.width(); 
       var d_xPos = angular.element(div).prop('offsetLeft'); 
       d_xPos += d_width; 

       console.log([xPos, d_xPos, this]) 
       if (xPos > d_xPos) { 
        angular.element(this).hide(); 
       } 


      }); 
     } 
    }; 
}); 

Answer 1

答案是巢另一个DIV内的图像，对测试图像位置原始的div如前所述，然后隐藏图像父div而不是图像本身。