I have a bunch of images that im serving up (from an external source im hosting elsewhere) onto a page via an mvc fileresult and into an angular ng-src.
eg.
<div ng=repeat="img in Images">
<img ng-src={{img.path}} style="height:100px;width:auto" />
</div>`
In this case I know that the img.path is always going to the external c# mvc and returning a filestream to the content.
I wish to only fit a certain 'summed' width of images on the screen - so that i do not have images half showing such as if i were to use "overflow:hidden" in a parent div.
Is there a way I can set ng-repeat to continue until the next image would overflow ( and thus preventing the overflow altogether) ? The images are being resized so that their height is all set to 100px, and the width proportionally scaling to meet this size. `
I thought the below directive would do the trick but it seems to rescale the images for some reason..
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();
}
});
}
};
});
