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而不是圖像本身。