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?
The Best Answer isphoto == '' or item. photo != '' . Like in JavaScript, an empty string will be evaluated as false.
How to check if a variable string is empty or undefine or null in Angular. In template HTML component: We can use the ngIf directive to check empty null or undefined. In this example, if stringValue is empty or null, or undefined, It prints the empty message.
You can simply use typeof. It will check undefined, null, 0 and "" also.
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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With