如何在AngularJS

Question

我有一个包含base64图像的json源代码，我想以纵向显示它们。我想我需要构建一个Image对象数组，并在构建数组时旋转它们，但我不确定如何在视图中显示图像对象。

这是我建造的阵列

angular.forEach($scope.trayDetails.tray_images, function(trayImage) {
    var myBase64 = "data:image/png;base64,"+trayImage.data;
    var img = new Image();
    img.src = myBase64;
    if (img.width>img.height ) {
        $(img).css({
            'transform': "rotate(90deg)"
        });
    }
    $scope.savedPictures.push(img);
});

但是现在我不知道如何处理数组，我尝试了这两种方法没有运气

<li ng-repeat="savedPicture in savedPictures" class="photo">
    {{savedPicture}}
</li>

<li ng-repeat="savedPicture in savedPictures" class="photo">
    <img ng-src="{{savedPicture}}" />
</li>

Answer 1

解决方案比你想象的容易：

angular.forEach($scope.trayDetails.tray_images, function(trayImage) {
   var myBase64 = "data:image/png;base64,"+trayImage.data;
   var img = new Image();
   img.src = myBase64;
   img.isRotated = img.width > img.height; //Use css class to rotate
   $scope.savedPictures.push(img);
});

然后将img添加到html中：

<li ng-repeat="savedPicture in savedPictures" class="photo">
     <img ng-class="{rotateImg: savedPicture.isRotated}" ng-src="{{savedPicture.src}}" />
</li>

如果img标签的宽度大于其高度，则它将具有rotateImg类。 rotateImg类的css是：

.rotateImg : { transform: rotate(90deg); }