ng-if(Angularjs)不起作用

时间:2013-12-04 07:33:46

标签: angularjs

我正在将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
 }

问题:由于控件未在ng-if内移动,因此无法看到HTML视图。 语法是否正确?

5 个答案:

答案 0 :(得分:53)

ngIf接受表达式(类似JavaScript的代码段)。这意味着在" "之间写入的任何内容都已经在Angular的上下文中,您不需要使用{{ }}

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

答案 1 :(得分:12)

ngIf也接受功能。

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

当您有多个代码或添加逻辑来定义ng-if中的布尔结果时,这非常有用。我经常使用它。

答案 2 :(得分:3)

ng-if接受像JS代码一样(奇怪),所以你不必使用{{}}代替传递你的json数据。

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

答案 3 :(得分:2)

我被类似的情况所困扰,使用ng-if和条件&#39;是否存在字符串数组项?&#39;

经过几次尝试(例如使用&#39; typeof&#39;),我发现使用&#39; indexOf&#39;非常适合我需要的东西:

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

答案 4 :(得分:2)

确保您拥有最新的Angular版本,但在早期版本的~v1.0.1中不可用