How to create a condition in the HTML using AngularJS

Question

I have this object

people = [{name: "John", registered: true },{name: "Micky", registered: false },{name: "Carol", registered: true }]

and I have this angular HTML:

<ul>
  <li ng-repeat="person in people">
    {{person.name}}
    <div class="already-registered-icon">&nbsp;</div>
  </li>
</ul>

My question is - how do I make a condition to display the registered icon only when the user is already registered?

I would think of something like this (but I don't know how it can be written):

{{if person.registered}}
        <div class="already-registered-icon">&nbsp;</div>
{{end}}

Check the docs. But if you want to go on guessing, I'd go for #if. — 11684
– 11684, Commented Jan 21, 2013 at 14:45

Yoshi · Accepted Answer · 2013-01-21 14:51:55Z

2

Just use ngShow:

<div ng-show="person.registered" class="already-registered-icon">&nbsp;</div>

demo: http://jsbin.com/usodaw/1/

answered Jan 21, 2013 at 14:51

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

2 Comments

Alon Over a year ago

this solves my issue (assigning display:none) but is there an attribute that will not render the HTML itself at all if the condition is true?

Yoshi Over a year ago

@Alon I don't know a build-in solution. You could probably write your own directive, though. But I'm not sure if this is the right approach.

Alon · Accepted Answer · 2013-01-21 14:52:37Z

0

It was the ng-show attribute I was missing

<ul>
  <li ng-repeat="person in people">
    {{person.name}}
    <div ng-show="person.registered" class="already-registered-icon">&nbsp;</div>
  </li>
</ul>

answered Jan 21, 2013 at 14:52

Alon

7,78820 gold badges64 silver badges100 bronze badges

Collectives™ on Stack Overflow

How to create a condition in the HTML using AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related