2016-07-21 5 views
0

У меня есть куча изображений, которые im обрабатывают (от внешнего источника im хостинг в другом месте) на странице через mvc fileresult и в угловой ng-src.angualr js - прекратить отображение изображений после достижения переполнения

например.

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

В этом случае я знаю, что img.path всегда будет внешней C# MVC и возвращение FILESTREAM к содержанию.

Я хочу только поместить определенную «суммированную» ширину изображений на экране, чтобы у меня не было изображений наполовину, например, если бы я использовал «переполнение: скрытый» в родительском div.

Есть ли способ установить 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(); 
       } 


      }); 
     } 
    }; 
}); 

ответ

0

Ответ был гнездиться изображение внутри другой DIV, проверить положение изображения против исходный div как раньше, а затем скрыть родительский div изображений в отличие от самого изображения.