How to Use Ternary With ng-if?

Question

For example, I want to show the element if $scope.test === 'hi". How do I achieve this?

I tried this:

<div ng-if = " {{test}} == 'hi' ? true : false "> 
  Show this if $scope.test is equal to 'hi' 
</div>

Example here doesn't seem to work. My fail plunker.

Are you using angular 1.0.5 on purpose? Here is a working plunk with 1.4 http://plnkr.co/edit/3XHe1Ngw1Ntv5FCTBJwA?p=preview — sbedulin, Jul 27 '15 at 18:53
Thanks seb. And no, I just googled an angular plunk because I was too lazy to write "ng-app = 'blah'" and 'ng-controller = 'blah2' ". Not even being sarcastic. We need some default plunk templates to start from. — VSO, Jul 27 '15 at 19:06

Shomz · Accepted Answer · 2015-07-27T18:55:02.313

2

You don't need a ternary for that since ng-if expects a boolean. This will do:

<div ng-if = "test == 'hi'"> 
  Show this if $scope.test is equal to 'hi' 
</div>

You can still use ternaries if you wish, you just don't need to interpolate the variable: test == 'hi' ? true : false

The issue is with your really old Angular version. See it working with 1.3: http://plnkr.co/edit/cKZkOe1O4EBiIWeirlZ2?p=preview

edited Jul 27 '15 at 18:55

answered Jul 27 '15 at 18:46

Shomz

It still shows up when it's 'bye': http://plnkr.co/edit/3XHe1Ngw1Ntv5FCTBJwA?p=preview – VSO Jul 27 '15 at 18:48
Hmmm, let me check, could be the Angular version. – Shomz Jul 27 '15 at 18:52
Yup, Angular version: http://plnkr.co/edit/cKZkOe1O4EBiIWeirlZ2?p=preview Try not to go below v**1.3** – Shomz Jul 27 '15 at 18:53
How about: ng-if="isEqual(test, 'hi')" and create function isEqual(a, b){return a == b;} – num8er Jul 27 '15 at 18:54
1

@num8er The problem is with the angular version, the code I wrote above works. – Shomz Jul 27 '15 at 18:55
Weird. i thought we had 1.4.x on our dev. Anyway, my mistake with the plunker. Thank you, accepting answer in a second. – VSO Jul 27 '15 at 18:56
Yeah, you probably misread 1.0.4. You're welcome, glad we figured it out. – Shomz Jul 27 '15 at 18:57
@Shomz agree with You, many times I do like Your code. I though maybe something buggy with angular. – num8er Jul 27 '15 at 18:57
@Shomz: Got it fixed in my actual code too. It was a stupid mistake but I started second guessing myself. So much easier when there is a working plunk and you KNOW you are just making some dumb mistake. Ty again. – VSO Jul 27 '15 at 19:01
Yeah, it's always easier with a small isolated example. You're welcome, now we know not to mess with ng-ifs on old Angular versions. :) – Shomz Jul 27 '15 at 19:03

cjds · Answer 2 · 2015-07-27T18:54:27.487

1

Um. You don't use {{}} in the ng-if.

<div ng-if = " test == 'hi'"> 
Show this if $scope.test is equal to 'hi' 
</div>

Above works

EDIT

This is failing in your plunker because The ng-if directive was provided after angular 1.1.5, you are using 1.0.5.

Working version

edited Jul 27 '15 at 18:54

answered Jul 27 '15 at 18:46

cjds

It's failing in my code and on another editor too. It was the first thing I tried before googling for a solution. – VSO Jul 27 '15 at 18:52
I am accepting Shomz answer because he was first, but thank you very much for the help, upvoted. – VSO Jul 27 '15 at 18:56

score -3 · Answer 3 · answered Jul 27 '15 at 18:46

-3

You don't need ternary expressions here, just use ng-show.

<div ng-show="test"></div>

answered Jul 27 '15 at 18:46

bioball

3 Answers3