AngularJS - ng-if check string empty value

Question

it s a simple example    lt a ng-if  item photo        href    details   item id    gt  lt img src   img jpg  class  img-responsive  gt  lt  a gt   lt a ng-if  item photo        href    details   item id    gt  lt img ng-src     item photo    class  img-responsive  gt  lt  a gt    I see it always generates the item photo       condition even if the value is empty  Why

User · Accepted Answer

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     x000D   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 3 0 angular min js  gt  lt  script gt  x000D   lt div ng-app init  item    photo       gt  x000D      lt div ng-if  item photo  gt  show if photo is not empty lt  div gt  x000D      lt div ng-if   item photo  gt  show if photo is empty lt  div gt  x000D     x000D      lt input type text ng-model  item photo  placeholder  photo    gt  x000D   lt  div x000D   x000D   x000D    Updated to remove bug in Angular

User · Answer

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

User · Answer

If by  empty  you mean undefined  it is the way ng-expressions are interpreted  Then  you could use     lt a ng-if   item photo  href    details   item id    gt  lt img src   img jpg  class  img-responsive  gt  lt  a gt

User · Answer

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 -    x000D   x000D   lt input type  number  id  myTextBox  name  myTextBox  x000D     ngModel    response myTextBox  x000D               myTextBox  ngModel  gt  x000D   x000D   x000D    To check if the field is empty or not this should be the script    x000D   x000D   lt div  ngIf   myTextBox value  style  color red   gt  x000D   Your field is empty x000D   lt  div gt  x000D   x000D   x000D    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

[angularjs] AngularJS - ng-if check string empty value

Examples related to angularjs