我正在使用一个简单的数据库和 angular 设置一个用户界面,用户可以在其中发布一条消息,要么只包含一条消息,要么在消息中附加一张图片。
通过一些研究,我发现了内置的 ngIf 条件,如果变量不包含空值,您可以在其中显示变量。
这是我的代码和输出:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
我想看看 m.post_url 是否包含一个值。当为空时,我想跳过将此变量添加到我的网站。
比如上一篇,没有图片,我想让它看起来像这样:
抱歉我的英语不好,英语不是我的第一语言。
首先,您将 angularJs 语法与新的 angular 混合在一起。
如果您ng-if
在图像标签中使用 angularjs,请使用。它工作正常。
正如我所看到的,您使用的是 ng-repeat 和 ng-bind,您使用的是 angularjs 而不是 angular。
所以在你的图像标签中使用
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句