2013-04-25 16 views
7

Açısal nesnedeki bir öznitelikten yolunu alan bir görüntü öğem var. Ancak, bu (imagePath) boşsa, bozuk bir görüntü alırım. Öznitelik boşsa görüntüyü oluşturmak istemiyorum ancak bunu yapmanın bir yolunu görmüyorum. Herhangi bir fikir?Açısal özellik boşsa öğeyi gizle

<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 
+0

gerçek iif: http://stackoverflow.com/questions/14164371/inline-conditionals-in-angular-js/14165488#14165488 – bresleveloper

cevap

20

ngHide yönergesine göz atmak istersiniz.

Yani kodunuz bir şey gibi görünecekti.

<img width="50px" ng-hide="current.manufacturerImage.imagePath == ''" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

Alternatif olarak, darkporter

<img width="50px" ng-show="current.manufacturerImage.imagePath" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

Ayrıca nesne daha sonra eleman gizlemek boş veya tanımlanmamış olup olmadığını kontrol etmek için bu güncelleme olabilir o öneriyi deneyebilirsiniz.

+9

Oldukça emin ng gizleme/gösterme doğru boole gerekmez ve truthiness kullanabilirsiniz. "Ng-show =" current.manufacturerImage.imagePath "' – jpsimons

+1

@darkporter, bu yaklaşıma, bir ID gibi, 0 gibi olabilecek herhangi bir değere dikkat edin, çünkü bu yanlış bir şekilde yanlış olarak ayrıştırılabilir. – adamdport

0

Bu öneri benim için işe yaramaz çünkü bir kullanıcı rolüne göre görüntü bağlantıları oluşturuyordum. Kullanıcının bir rolü vardı, ancak bununla ilişkili bir resim olduğu anlamına gelmiyordu. Yani

angular.module('hideEmptyImages', []) 
.directive('hideEmptyImage',function() { 
    return { 
     Restrict: 'AE', 
     Link: function (scope, elem, attrs) { 
      elem.error(function() { 
       elem.hide(); 
      }); 
     } 
    }; 
}); 

:

Bu yüzden bir yönerge oluşturdu .imagePath boş veya eğer

<img hide-empty-image width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

göstermez sadece ilişkili bir görüntü yoksa.

İlgili konular