ng-if (Angularjs) is not working

Question

我正在将json数据呈现到html页面：

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

这是我渲染的json数据：

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

问题：HTML视图不可见，因为控件未在ng-if中移动。语法正确吗？

Answer 1

ngIf接受一个表达式（类似JavaScript的代码片段）。这意味着在" "之间编写的任何内容都已经在Angular的上下文中了，您不需要使用{{ }}:

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

Answer 2

ngIf也接受函数。

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

当您有多个代码或添加了逻辑来定义ng if中的布尔结果时，这可能非常有用。我经常用这个。

Answer 3

ng如果接受类似JS的代码（奇怪），那么您不必使用{{}}来传递类似的json数据。

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

Answer 4

我遇到了类似的情况，使用了一个带有条件"是否存在字符串数组项？"的ng-if

经过几次尝试（例如使用"typeof"），我发现使用"indexOf"非常适合我需要的东西：

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

Answer 5

确保您有最新的Angular版本，它在~1.0.1 的早期版本中不可用