Student  Arya Student Arya - 5 months ago 12
AngularJS Question

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?

Answer

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'">