If in ng-click

Question

Is there a way to set a condition inside ng-click? Here, I want the form not to be submitted if there are any form errors, but then I got a parsing exception.

<input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit"> 

I tried to use ng-disabled, but then my validation plugin does not work, so the form never submits at all, therefore it does not start.

Answer 1

Do not put the condition expression in the template.

Do it on the controller.

Template:

 <input ng-click="check(profileForm.$valid)" name="submit" id="submit" value="Save" class="submit" type="submit"> 

Controller:

 $scope.check = function(value) { if (value) { updateMyProfile(); } } 

Answer 2

It may be useless and useless, but, like javascript, you do not need to use the triple version, as suggested above, in the ng-click statement. You should also be able to use the lazy evaluation syntax ("or die"). So, for your example above:

 <input ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit"> 

will become:

 <input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit"> 

In this case, if the profile is invalid, nothing happens, otherwise updateMyProfile () is called. Like the @falinsky link above.

Answer 3

Here is the hack I discovered that might work for you, although its not very pretty, and I'm personally confused to use such a line of code:

 ng-click="profileForm.$valid ? updateMyProfile() : alert('failed')" 

Now you should be thinking: “But I do not want it to warn (“ failed ”) if my profileForm invalid. Well, that is the ugly part. For me, no matter what I put in the else clause of this triple expression, never not executed.

However, if it is deleted, an error occurs. So you can just fill it with a meaningless warning.
I told you that it was ugly ... but I'm not even mistaken when I do something like this.
The right way to do this, as Chen-tzu said, but to each of them.

Answer 4

If you need to do it this way, here are a few ways to do it:

Disabling a button with ng-disabled

Today it is the easiest solution.

 <input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... > 

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

It might be nice if you show / hide some complex markup.

 <div ng-if="profileForm.$valid"> <input ng-click="updateMyProfile()" ... > </div> <div ng-if="!profileForm.$valid"> Sorry! We need all form fields properly filled out to continue. </div> 

(remember that there is no ng-else ...)

Connection of both

Communicating with the user where the button is located (he will no longer search for it), but explain why you can’t click it.

 <input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... > <div ng-if="!profileForm.$valid"> Sorry! We need all form fields properly filled out to continue. </div> 

Answer 5

We can add the ng-click event conditionally without using a disconnected class.

HTML:

  <input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit"> 

Answer 6

From http://php.quicoto.com/inline-ifelse-statement-ngclick-angularjs/ , so you will do this if you really need to:

 ng-click="variable = (condition=='X' ? 'Y' : 'X')" 

Answer 7

You can put conventions inside tags. Try:

 ng-class="{true:'active',false:'disable'}[list_status=='show']"