ternary expression in ng-click in angularjs

Question

I'm wondering if it's possible to use a ternary expression in the ng-click attribute. I don't want to use a separate controller function if possible.

It's a two button toggle setup - I can get a simple toggle working, but don't want a second click of the "off" button to turn back on.

The ternary in ng-click does not work (note the ternary in ng-class does work):

<button
    ng-click="allOn2==true ? allOn2 : !allOn2"
    ng-class="allOn2==true ? 'btn-green-on' : 'btn-green-off'">
ON</button>

Here's a more complete jsfiddle: toggler

Haven't learned about ng-switch yet but from a brief check it seems more like a multi-choice ng-show/hide. Thanks — braddo
– braddo, Commented Jun 19, 2014 at 19:07

Michael Kang · Accepted Answer · 2014-06-19 18:06:41Z

5

You are not doing anything with the ternary expression. For it to be useful, assign it:

{{ var1 }} {{ var2}}
<button
    ng-click="var1 = (allOn2==true ? allOn2 : !allOn2)"
    ng-class="{'btn-green-on':allOn2, 'btn-green-off' : !allOn2}">
ON</button>

I'm not sure how you can use ternary expressions for ng-class though...

answered Jun 19, 2014 at 18:06

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

3 Comments

braddo Over a year ago

Ah... you're right. My fiddle doesn't show any ng-model to which I have bound the value of allOn, as in my project. But I can see why what you suggested works. I think I was confused becuase the ng-class requires you to "do nothing" i.e. just evaluate the expression to find the class. I need to have the on-click set the value of allOn explicitly, which I thought was just happening through evaluation of the expression. Thanks!

braddo Over a year ago

here's a link to the updated fiddle: link

Shannon Scott Schupbach Over a year ago

Checking for a boolean value in a ternary is kind of redundant. allOn2==true ? allOn2 : !allOn2 can just be allOn2 = !allOn2.

ρяσѕρєя K · Accepted Answer · 2017-01-11 12:22:52Z

0

You can use something as as a workaround for ternary

 ng-click="(AppliedApps!=null && Collapse('CollapsedAppliedApplications')) || 
(AppliedApps.length==0 && Collapse('CollapsedAppliedApplications'))">

edited Jan 11, 2017 at 12:22

ρяσѕρєя K

133k54 gold badges203 silver badges216 bronze badges

answered Jan 11, 2017 at 12:02

Partho Ghosh

439 bronze badges

Collectives™ on Stack Overflow

ternary expression in ng-click in angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related