Question

如何根据图像宽高比设置ng-class（内部ng-repeat）？

类似......

<div ng-repeat="img in images" style="width: 100px; height: 100px;">
   <img ng-src="{{img}}" ng-class="{'wide': img.width/img.height > 1, 'tall': img.width/img.height <= 1}" />
</div>

编辑：CSS对象不适合我，因为IE ... :(

Answer 1

这里的主要问题是在img json对象上设置width / height属性之前等待图像加载。所以这样的事情会起作用。

重要说明：Scope.apply - 因为你正在改变非角度上下文中的作用域，即在jQuery中你需要调用scope.apply，这样就会发生digest-watch循环并且变量设置正确。

difference

HTML：

<img ng-src="{{img}}" image-set-aspect ng-class="{'wide':    img.width/img.height > 1, 'tall': img.width/img.height <= 1}" />

指令：

app.directive('imageSetAspect', function() {
    return {
        scope: false,
        restrict: 'A',
        link: function(scope, element, attrs) {
        element.bind('load', function() {
            // Use jquery on 'element' to grab image and get dimensions.
            scope.$apply(function() {
              scope.imageMeta.width = $(element).width(); 
              scope.imageMeta.height = $(element).height(); 
              console.log(scope.$parent.imageMeta);
            });
        });
        }
    };
});

Answer 2

经过多次探索，我找到了一个简单而又性感的答案……这是一个CSS img元素属性，称为object-fit。它可能具有以下值：填充，包含，覆盖，缩放，无。

img {
  object-fit: cover;
}

Angular ng-class取决于图像方面

2 个答案: