CODEWITHSUNDEEP
angularjs
satyendra kumar
satyendra kumar

Reputation: 759

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

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>

Upvotes: 43

Views: 212123

Answers (7)

sayyed tabrez
sayyed tabrez

Reputation: 126

<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.

Upvotes: 0

Pawan Kr
Pawan Kr

Reputation: 29

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>

Upvotes: -1

Anshul
Anshul

Reputation: 395

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>

Upvotes: 2

Ganesh Udmale
Ganesh Udmale

Reputation: 425

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.

Upvotes: 6

Vasyl
Vasyl

Reputation: 1424

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

Upvotes: 60

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

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>

Upvotes: 28

Chetan Sharma
Chetan Sharma

Reputation: 332

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

  1. Directives will respond the same place where it's execute.
  2. 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.

Upvotes: 3

Related Questions