1

我有一个显示一些用户信息的小部件

<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 并且永远不会重新渲染。

4

1 回答 1

2

您绝对可以使用ng-switch，请在此处尝试。小提琴

<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 对象转换为Booleanusing !!，然后条件将简单地为trueor false。

于 2013-07-29T14:42:28.230 回答