2013-04-25 1 views
7

각도 객체에있는 속성에서 경로를 가져 오는 이미지 요소가 있습니다. 그러나이 (imagePath)가 비어 있으면 깨진 이미지가 나타납니다. 속성이 비어있는 경우 이미지를 렌더링하고 싶지 않지만이 작업을 수행 할 방법이 없습니다. 어떤 아이디어?각도 속성이 비어 있으면 요소 숨기기

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

실제 iif : http://stackoverflow.com/questions/14164371/inline-conditionals-in-angular-js/14165488#14165488 – bresleveloper

답변

20

ngHide 지시어를 확인하고 싶습니다.

그래서 코드는 다음과 유사합니다.

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

또는, 당신은 또한 darkporter

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

당신은 또한 객체가 요소를 숨기 null 또는 정의되지 않은 경우 확인하려면이 업데이트 수에 의해 제안을 시도 할 수 있습니다.

+9

ng-hide/show는 적절한 부울을 필요로하지 않으며 진실성을 사용할 수 있습니다. 나는'ng-show = "current.manufacturerImage.imagePath"' – jpsimons

+1

@ darkporter를 할 것이지만, ID와 마찬가지로 0 일 수있는 값으로이 접근법에주의를 기울여야한다. 왜냐하면 이것은 잘못된 것처럼 잘못 분석 될 수 있기 때문이다. – adamdport

0

사용자 역할을 기반으로 이미지 링크를 생성했기 때문에이 제안은 저에게 적합하지 않습니다. 사용자는 역할을했지만 그와 관련된 이미지가 있다는 것을 의미하지는 않습니다. 그래서

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

:

그래서 내가 지시 만든 .imagePath가 비어있는 경우, 또는

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

가 표시되지 않습니다를 단순히 관련 이미지가없는 경우.

관련 문제