ng-if（Angularjs）不起作用

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-if接受像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版本，它在~v1.0.1的早期版本中不可用