如何使角度仅显示可用的数据

How to make angular show only the data that is available

本文关键字：数据 显示 何使角      更新时间：2023-09-26

在我看来，我想显示用户的图像。我有用户通过 Facebook 登录我的应用，也有用户通过电子邮件登录并通过。当用户从Facebook登录时，我从他们的Facebook上获取照片并将其显示在视图上，如果他们使用电子邮件登录，我会拍摄我在数据库中的照片。我怎样才能让 angularjs 拍摄我可用的照片。我可以这样做

吗 
<img ng-src="{{user.picture}}" ng-src="{{pic[1]}}">

放置两个图像，如果user.picture可用，它将显示它，否则显示pic[1]。

还有其他解决方案吗？

您可以使用 '||'（或者）在您看来，如下所示：

<img ng-src="{{user.picture || pic[1]}}" />

你可以做这样的事情：

<img ng-src="{{user.picture}}" ng-if="user.picture">
<img ng-src="{{pic[1]}}" ng-if="!user.picture">

这样，如果user.picture不是未定义的，则会显示它。否则它会显示另一个

一个粗略的解决方案，只需使用两个图像，根据user.picture的值隐藏它们 

<img ng-src="{{user.picture}}" ng-hide='!user.picture'>
<img  ng-src="{{pic[1]}}" ng-hide='user.picture'>

解决方案 2：

另一种选择是只设置一个带有 src 的图像，该图像在控制器内部有条件地更改。

例如：

<img ng-src="{{finalPic}}" />

在控制器Js中，当你已经得到你的图像之后，把：

$scope.finalPic=$scope.user.picture?$scope.user.picture:$scope.pic[1];
相关文章：