AngularJS - ng-if check string empty value

Question

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?

Do you mean it still has ng-if="item.photo != ''" attribute? — dfsq
– dfsq, Commented Dec 9, 2014 at 13:28
Unrelated, but this seems like a lot of duplication for just changing the image source. — Dave Newton
– Dave Newton, Commented Dec 9, 2014 at 13:32
Maybe item.photo is not an empty string, but null or undefined? — Guillermo Gutiérrez
– Guillermo Gutiérrez, Commented Dec 9, 2014 at 13:35

Michael · Accepted Answer · 2018-05-24 03:14:43Z

136

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

edited May 24, 2018 at 3:14

Michael

3133 silver badges19 bronze badges

answered Dec 9, 2014 at 13:39

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonny bordo Over a year ago

Although simple and clean, this answer hides a small bug in it, which might not matter to you so much. Just watch what happens when you enter one of: 0, n or f. I couldn't find any documentation about it or an open issue.

Martin Over a year ago

Yes -- this is an issue with older versions of AnguarJS (1.2.x and before). It exists in the version hosted on stackexchange. This bug has been fixed in 1.3.0 github.com/angular/angular.js/commit/…

iulian · Accepted Answer · 2014-12-09 13:37:09Z

9

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.

answered Dec 9, 2014 at 13:37

iulian

5,8523 gold badges32 silver badges40 bronze badges

Comments

n00dl3 · Accepted Answer · 2014-12-09 13:36:45Z

7

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>

answered Dec 9, 2014 at 13:36

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

Comments

Rito · Accepted Answer · 2019-01-10 05:56:52Z

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.

Collectives™ on Stack Overflow

AngularJS - ng-if check string empty value

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related