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";
});

诀窍是强制使用Boolean将user.avatar对象转换为!!，然后条件将简单为true或false。

当属性未定义时显示虚拟图像

1 个答案: