Показать манекен изображения, когда свойство не определено

Question

Я немного виджет, который отображает некоторую информацию о пользователе

<div id="this-is-me"> 
    <p class="userpic"><img src="/gfx/gui/{{ user.avatar }}" alt="{{ user.first_name + ' ' + user.last_name }}" width="75" height="75"></p> 
    <h6>{{ user.first_name + ' ' + user.last_name }}</h6> 
    <ul class="options white right inline"> 
     <li><a href="#/profile">Profiel bekijken</a></li> 
    </ul> 
</div> 

, как вы можете видеть, аватар визуализируется, но когда user.avatar пуст это приводит сломанная ссылка, дающая пользователю ошибку 404 на странице.

я пытался добавить логику дефолта внутри фигурных скобок, как так {{ user.avatar || 'missing-user.png' }}

есть правильный способ исправить это в угловой? Я не могу использовать ng-switch, поскольку это удаляет html, и этот виджет присутствует на странице до и после входа в систему. поэтому, если пользователь входит в систему, этот виджет должен повторно отобразить и по-прежнему отображать аватар ... Я считаю, что это невозможно с помощью ng-switch, поскольку это удаляет html и никогда не будет повторно отображаться.

Answer 1

Вы можете использовать ng-switch, пожалуйста, попробуйте его здесь. Fiddle

<span ng-switch on="!!user.avatar"> 
    <img ng-switch-when="true" ng-src="/gfx/gui/{{ user.avatar }}" alt="{{ user.first_name + ' ' + user.last_name }}" width="75" height="75"> 
    <img ng-switch-when="false" ng-src="missing-user.png"> 
</span> 

$scope.$apply(function() { 
    console.log('done'); 
    $scope.user.avatar = "XXX"; 
}); 

Хитрость заключается в том, чтобы заставить преобразовать объект user.avatar в Boolean с помощью !!, а затем условие будет просто быть true или false.