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>

This is what may be happening, if the value of item.photo is undefined then item.photo != '' will always show as true. And if you think logically it actually makes sense, item.photo is not an empty string (so this condition comes true) since it is undefined.

Now for people who are trying to check if the value of input is empty or not in Angular 6, can go by this approach.

Lets say this is the input field -

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">

To check if the field is empty or not this should be the script.

<div *ngIf="!myTextBox.value" style="color:red;">
 Your field is empty
</div>

Do note the subtle difference between the above answer and this answer. I have added an additional attribute .value after my input name myTextBox.
I don't know if the above answer worked for above version of Angular, but for Angular 6 this is how it should be done.