How to make use of ng-if , ng-else in angularJS

Question

I want to compare id.here if id equals 5 do this, else do that. How can I achieve this?

<div class="case" data-ng-if="data.id === '5' ">
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}"
            data-ng-model="customizationCntrl.check[data.id1]"
            data-ng-checked="{{data.status}}=='1'" onclick="return false;">{{data.displayName}}
        <br>
</div>
<div class="case" data-ng-else>
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}"
            data-ng-model="customizationCntrl.check[data.id]"
            data-ng-checked="{{data.status}}=='1'">{{data.displayName}}<br>
</div>

what is ng-else directive is it a core directive in angularjs? — Kalhan
– Kalhan, Commented Sep 24, 2015 at 8:14
Angular 4 now has it : stackoverflow.com/questions/43006550/… — Simon_Weaver
– Simon_Weaver, Commented Jun 20, 2017 at 20:34

Vasyl · Accepted Answer · 2017-06-27 08:51:41Z

60

Use ng-switch with expression and ng-switch-when for matching expression value:

<div ng-switch="data.id">
  <div ng-switch-when="5">...</div>
  <div ng-switch-default>...</div>
</div>

Example is here

Angular2 example

edited Jun 27, 2017 at 8:51

answered Sep 24, 2015 at 8:17

Vasyl

1,42317 silver badges27 bronze badges

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

3 Comments

Simon_Weaver Over a year ago

for Angular2 same answer, different syntax - angular.io/docs/ts/latest/api/common/index/…

Simon_Weaver Over a year ago

you can also put (data.id == 5) for the switch statement expression and then true for the when expression if you find that clearer (and obviously only for an either/or value)

nzn Over a year ago

I don't think that will work @Simon_Weaver, as according to the docs, you can't use an expression for the when, so true will evaluate to the string "true".

Abhilash Augustine · Accepted Answer · 2016-12-29 09:19:52Z

28

There is no directive for ng-else

You can use ng-if to achieve if(){..} else{..} in angularJs.

For your current situation,

<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>

edited Dec 29, 2016 at 9:19

answered Sep 24, 2015 at 8:31

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

1 Comment

Oniya Daniel Over a year ago

This is what I use. You can negate your if statement to achieve an else.

Ganesh Udmale · Accepted Answer · 2017-10-24 13:14:21Z

6

You can also try ternary operator. Something like this

{{data.id === 5 ? "it's true" : "it's false"}}

Change your html code little bit and try this hope so it will be work for you.

answered Oct 24, 2017 at 13:14

Ganesh Udmale

4236 silver badges10 bronze badges

Comments

Chetan Sharma · Accepted Answer · 2015-09-24 12:41:06Z

3

I am adding some of the important concern about ng directives:-

Directives will respond the same place where it's execute.
ng-else concept is not there, you can with only if, or other flavor like switch statement.

Check out the below example:-

<div ng-if="data.type == 'FirstValue' ">
//different template with hoot data
</div>

<div ng-if="data.type == 'SecondValue' ">
  //different template with story data
</div>

<div ng-if="data.type == 'ThirdValue' ">
 //different template with article data
</div>

As per datatype it is going to render any one of the div.

answered Sep 24, 2015 at 12:41

Chetan Sharma

3322 silver badges12 bronze badges

Comments

Anshul · Accepted Answer · 2017-12-12 08:29:14Z

2

The syntax for ng if else in angular is :

<div class="case" *ngIf="data.id === '5'; else elsepart; ">
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}" 
    data-ng-model="customizationCntrl.check[data.id1]" data-ng-checked="
    {{data.status}}=='1'" onclick="return false;">{{data.displayName}}<br>
</div>
<ng-template #elsepart>
    <div class="case">
        <input type="checkbox" id="{{data.id}}" value={{data.displayName}}"  
        data-ng-model="customizationCntrl.check[data.id]" data-ng-checked="
        {{data.status}}=='1'">{{data.displayName}}<br>
    </div> 
</ng-template>

answered Dec 12, 2017 at 8:29

Anshul

3953 silver badges15 bronze badges

1 Comment

Hrishikesh Kale Over a year ago

ngif and else in used in higher version of angularjs like angular 2 and higher not in angularjs

sayyed tabrez · Accepted Answer · 2018-10-05 10:27:59Z

0

<span ng-if="verifyName.indicator == 1"><i class="fa fa-check"></i></span>
<span ng-if="verifyName.indicator == 0"><i class="fa fa-times"></i></span>

try this code. here verifyName.indicator value is coming from controller. this works for me.

answered Oct 5, 2018 at 10:27

sayyed tabrez

1261 gold badge1 silver badge11 bronze badges

Comments

Pawan Kr · Accepted Answer · 2017-12-27 07:58:59Z

-1

You can write as:

<div class="case" ng-if="mydata.id === '5' ">
    <p> this will execute </p>
</div>
<div class="case" ng-if="mydata.id !== '5' ">
    <p> this will execute </p>
</div>

edited Dec 27, 2017 at 7:58

answered Dec 11, 2017 at 10:24

Pawan Kr

296 bronze badges

1 Comment

Pawan Kr Over a year ago

use this statement for if else condition in angularjs

Collectives™ on Stack Overflow

How to make use of ng-if , ng-else in angularJS

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related