AngularJS - ng-if check string empty value
it's a simple example:
<a ng-if="item.photo == ''" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>
<a ng-if="item.photo != ''" href="#/details/{{item.id}}"><img ng-src="/{{item.photo}}" class="img-responsive"></a>
I see it always generates the item.photo != ''
condition even if the value is empty. Why?
You don't need to explicitly use qualifiers like item.photo == ''
or item.photo != ''
. Like in JavaScript, an empty string will be evaluated as false.
Your views will be much cleaner and readable as well.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app init="item = {photo: ''}">
<div ng-if="item.photo"> show if photo is not empty</div>
<div ng-if="!item.photo"> show if photo is empty</div>
<input type=text ng-model="item.photo" placeholder="photo" />
</div
Updated to remove bug in Angular
Probably your item.photo
is undefined
if you don't have a photo attribute on item in the first place and thus undefined != ''
. But if you'd put some code to show how you provide values to item
, it would help.
PS: Sorry to post this as an answer (I rather think it's more of a comment), but I don't have enough reputation yet.
If by "empty" you mean undefined
, it is the way ng-expressions are interpreted. Then, you could use :
<a ng-if="!item.photo" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>