Angular ng-Klasse abhängig vom Bildformat

Question

Wie kann ich eine ng-Klasse (innerhalb ng-repeat) abhängig vom Bildseitenverhältnis einstellen?

so etwas wie ...

<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> 

EDIT: CSS-Objekt-fit für mich nicht, weil der IE arbeiten ... :(

Answer 1

Das Hauptproblem hier ist für das Bild zu warten lade vor dem Einstellen der width/height Eigenschaften auf dem Objekt img json So funktioniert so etwas

Wichtig: Scope.apply - Weil Sie den Bereich in einem nicht-eckigen Kontext ändern, dh in jQuery müssen Sie Rufen Sie scope.apply auf, damit der Digest-Watch-Zyklus und der Variabl Es wird richtig eingerichtet.

Plunker

HTML:

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

Richtlinie:

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); 
      }); 
     }); 
     } 
    }; 
});