在角度中使用 ng-if 来显示或隐藏图像答案

【问题标题】：Using ng-if in angular to display or hide image在角度中使用 ng-if 来显示或隐藏图像
【发布时间】：2019-06-07 11:22:17
【问题描述】：

我试图在屏幕上显示一系列图像，但隐藏或不显示具有特定图像名称的图像，但出于某种原因，它要么隐藏所有图像，要么只显示一个。

这是我的代码，不胜感激。

<div ng-repeat="x in documents" ng-if="x.document_name=='leftover.png'" ng-show="not_admin">             
    <img src="{{ x.image }}" width="30" height="30"> 
    <p><b>{{ x.document_name }}</b></p>          
</div>

如果图像是 'leftover.png' 并且 not_admin 为 true（在我的控制器中已设置为 true），我只想隐藏一个 div。

更新

我应该更清楚，如果用户是管理员，我想要显示所有图像，否则只隐藏“leftover.png”。

所以，如果登录用户不是管理员，他们可以看到除“leftover.png”之外的所有图像，但是当管理员登录时，他们可以看到所有图像。

我希望这更有意义。

【问题讨论】：

标签： angularjs angular-ng-if

【解决方案1】：

您可以在单个 ng-if 中组合这两个条件

<div ng-repeat="x in documents" ng-if="!x.document_name=='leftover.png' && !not_admin">             
    <img src="{{ x.image }}" width="30" height="30"> 
    <p><b>{{ x.document_name }}</b></p>          
</div>

【讨论】：

谢谢，您的建议隐藏了所有图像 - 屏幕上没有显示任何内容。如果他们不是管理员，我只想隐藏一张图片……那是名为“leftover.png”的图片
现在试试，我觉得应该可以
解决问题了吗？
抱歉，它不起作用 - 仍然隐藏图像。嗯：（
我想你想要 !(x.document_name=='leftover.png' && not_admin) 或 !x.document_name=='leftover.png' || !not_admin 来做你想做的事情。显示除 lefover 之外的所有图像，除非 not_admin 为 false。

【解决方案2】：

为什么你使用不必要的条件：

ng-show="not_admin"

如果它 (not_admin) 对所有情况都为真并且是必需的。尝试像这样合并两个条件：

ng-if="x.document_name != 'leftover.png' && not_admin"

【讨论】：