CODEWITHSUNDEEP
angularjs
Anil Arya
Anil Arya

Reputation: 3110

ng-if (Angularjs) is not working

I am rendering json data to html page :

<div ng-if="'done'={{task_detail.status}}">
    <b>Status :</b> 
    <p class="label label-success">{{task_detail.status}}</p>
    <br>
    <br>
    <div class="progress progress-striped">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:{{task_detail.percentage_finished}}%">
            <span class="sr-only">{{task_detail.percentage_finished}}% Complete</span>
        </div>
    </div>
</div>

Here is my rendered json data :

{
     "id": 1,
     "title": "Launch an EC Instance",
     "desc": "Needed an EC instance to deploy the ccr code",
     "status": "done",
     "percentage_finished": 100
 }

Issue : HTML view is not visible as control is not moving inside ng-if . Is syntax correct?

Upvotes: 25

Views: 77506

Answers (5)

Kumar Rahul
Kumar Rahul

Reputation: 79

ng-if accept same like JS code(strange), so you dont have to use {{}} instead pass your json data something like this.

<div ng-if="'done' === task_detail.status">
<div>...</div>
</div>

Upvotes: 4

Kind Contributor
Kind Contributor

Reputation: 18543

Make sure you have the latest Angular version, it wasn't available in early versions of ~v1.0.1

Upvotes: 2

wolfstevent
wolfstevent

Reputation: 685

I was stumped on a similar situation, using an ng-if with the conditional 'Does a string array item exist?'

After a few tries (e.g. using 'typeof') I found using 'indexOf' works very well for what I needed:

<li ng-if="lesson.practice.indexOf('Situations') > -1"><a id="Lev{{level.number}}Les{{lesson.number}}SI">Situations</a></li>

Upvotes: 2

AlwaysALearner
AlwaysALearner

Reputation: 43947

ngIf accepts an expression(JavaScript-like code snippet). This means anything written in between the " " is already inside Angular's context and you dont need to use {{ }}:

<div ng-if="task_detail.status == 'done'">

Upvotes: 56

Darryl
Darryl

Reputation: 1451

ngIf also accepts functions.

<div ng-if="checkStatus(task_detail.status)">

This can be very useful when you have multiple codes or added logic which defines the boolean result in your ng-if. I use this quite frequently.

Upvotes: 13

Related Questions