Conditionally show content in AngularJS templates using ternary operators

Question

I want to display a button depending on the result of ternary operator in Angular JS, but I am not able to display the HTML content inside the curly braces, it only allows the string form. Below is my code.

{{x.status === "pending" ? "pending" : "Card is Already Verified"}}
<ons-button ng-click="setCard(x); page.pushPage('verifyCard.html', {animation: 'slide'});">Verify <ons-icon icon="ion-checkmark"></ons-button>

If the status is pending, I want to display the ons-button in pending field.

you can use ng-show ='x.status==="pending"' in ons-button

Pavan Teja
– Pavan Teja

2016-02-24 07:14:21 +00:00
Commented Feb 24, 2016 at 7:14 — Pavan Teja
– Pavan Teja, Commented Feb 24, 2016 at 7:14

Naga Sandeep · Accepted Answer · 2016-02-24 07:14:07Z

2

Can you try

<ons-button ng-show='x.status === "pending"' ng-click="setCard(x); page.pushPage('verifyCard.html', {animation: 'slide'});">Verify <ons-icon icon="ion-checkmark"></ons-button>

ng-show documentation here

answered Feb 24, 2016 at 7:14

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

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

Comments

Shwetha · Accepted Answer · 2016-02-24 07:15:35Z

0

You can use ng-show directive to show/hide the button. For example

<ons-button ng-show="condition">

In place of condition you need to place the valid condtion. If that condition is true then the button will be shown, else button will be hidden.

answered Feb 24, 2016 at 7:15

Shwetha

9138 silver badges15 bronze badges

Collectives™ on Stack Overflow

Conditionally show content in AngularJS templates using ternary operators

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related