angular js - перестать отображать изображения при достижении переполнения

Question

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

например.

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

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

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

Есть ли способ, которым я могу установить ng-repeat, чтобы продолжить, пока следующее изображение не переполнится (и, таким образом, предотвратит переполнение в целом)? Размеры изображений изменяются так, чтобы их высота была установлена ​​на 100 пикселей, а ширина пропорционально масштабировалась, чтобы соответствовать этому размеру. `

Я думал, что приведенная ниже директива сработает, но, похоже, по некоторым причинам она масштабирует изображения.

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 изображений в отличие от самого изображения.