if statement in ng-click

Question

Is there a way to put a condition inside an ng-click   Here  I want that the form is not submitted if there are any form errors  but then I got a parse exception     lt input  ng-click    if profileForm  valid  updateMyProfile      name  submit  id  submit  value  Save  class  submit  type  submit  gt    I tried to use ng-disabled but then my validation plugin does not work cause form is never submitted at all  so it is not triggered

User · Answer

If you do have to do it this way  here s a few ways of doing it   Disabling the button with ng-disabled  By far the easiest solution    lt input ng-disabled   profileForm  valid  ng-click  updateMyProfile         gt    Hiding the button  and showing something else  with ng-if  Might be OK if you re showing hiding some complex markup    lt div ng-if  profileForm  valid  gt       lt input ng-click  updateMyProfile         gt   lt  div gt   lt div ng-if   profileForm  valid  gt      Sorry  We need all form fields properly filled out to continue   lt  div gt     remember  there s no ng-else       A mix of both  Communicating to the user where the button is  he won t look for it any longer   but explain why it can t be clicked    lt input ng-disabled   profileForm  valid  ng-click  updateMyProfile         gt   lt div ng-if   profileForm  valid  gt      Sorry  We need all form fields properly filled out to continue   lt  div gt

User · Answer

You can put conditionals inside tags  Try   ng-class   true  active  false  disable   list status   show

User · Answer

Write as   lt input type  submit  ng-click  profileForm  valid  true updateMyProfile       name  submit  value  Save  class  submit  id  submit  gt

User · Answer

Don t put any Condition Expression in Template  Do it at the Controller  Template   lt input ng-click  quot check profileForm  valid  quot  name  quot submit quot          id  quot submit quot  value  quot Save quot  class  quot submit quot  type  quot submit quot  gt   Controller   scope check   function value        if  value           updateMyProfile

User · Answer

From http   php quicoto com inline-ifelse-statement-ngclick-angularjs   this is how you do it  if you really have to   ng-click  variable    condition   X     Y     X

User · Answer

We can add ng-click event conditionally without using disabled class   HTML       lt input ng-click  profileForm  valid  amp  amp  updateMyProfile    name  submit  id  submit  value  Save  class  submit  type  submit  gt

User · Answer

Here s a hack I discovered that might work for you  although its not pretty and I d personally be embarrassed to use such a line of code   ng-click  profileForm  valid   updateMyProfile     alert  failed      Now  you must be thinking  but I don t want it to alert  failed   if my profileForm isn t valid  Well that s the ugly part  For me  no matter what I put in the else clause of this ternary statement doesn t get executed ever   Yet if its removed an error is thrown  So you can just stuff it with a pointless alert  I told you it was ugly    but I don t even get any errors when I do something like this  The proper way to do this is as Chen-Tsu mentioned  but to each their own

User · Answer

This maybe irrelevant and of no use  but as it s javascript  you don t have to use the ternary as suggested above in the ng-click statement   You should also be able to use the lazy evaluation   or die   syntax as well   So for your example above    lt input  ng-click    if profileForm  valid  updateMyProfile      name  submit  id  submit  value  Save  class  submit  type  submit  gt    would become    lt input  ng-click  profileForm  valid  amp  amp  updateMyProfile    name  submit  id  submit  value  Save  class  submit  type  submit  gt    In this case  if the profile is not valid then nothing happens  otherwise  updateMyProfile   is called   Like in the link  falinsky provides above

[javascript] if statement in ng-click

Disabling the button with ng-disabled

Hiding the button (and showing something else) with ng-if

A mix of both

Examples related to javascript

Examples related to angularjs