L'élément peau si angulaire de l'attribut est vide

J'ai un élément de l'image qui est tracé à partir d'un attribut que j'ai sur mon angulaire de l'objet. Toutefois, si cette (imagePath) est vide je obtenir une image brisée. Je voudrais pas le rendu de l'image si l'attribut est vide mais je ne vois pas le moyen de le faire. Des idées?

<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">
réel iif: stackoverflow.com/questions/14164371/...

OriginalL'auteur zmanc | 2013-04-25

  1. 21

    Vous voulez vérifier ngHide directive.

    De sorte que votre code devrait ressembler à quelque chose comme. 

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

    Alternativement, vous pouvez également essayer la suggestion de darkporter

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

    Vous pouvez également mettre à jour pour vérifier si l'objet est null ou undefined puis masquer l'élément.

    Assez sûr ng-hide/show n'avez pas besoin de les booléens et peut utiliser truthiness. Je ferais ng-show="current.manufacturerImage.imagePath"
    soyez prudent avec cette approche avec une valeur qui peut être 0 si, comme un IDENTIFIANT, ce qui pourrait être analysé de manière incorrecte comme falsy.

    OriginalL'auteur Tim B James

  2. 0

    Cette suggestion ne fonctionne pas pour moi parce que j'étais la génération de mes liens d'image basé sur un rôle users. L'utilisateur a un rôle, mais cela ne signifie pas qu'ils avaient une image qui lui est associée.

    J'ai donc créé une directive:

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

    Donc: 

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

    n'affichera pas si la .imagePath est vide ou s'il n'est tout simplement pas une image associée.

    OriginalL'auteur Tj Gienger