Ng-if (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
 }

Проблема. HTML-представление не отображается, поскольку элемент управления не перемещается внутри ng-if. Правильно ли синтаксис?

Ответ 1

ngIf принимает выражение (фрагмент кода, подобный JavaScript). Это означает, что все, что написано между " ", уже находится в контексте Angular, и вам не нужно использовать {{ }}:

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

Ответ 2

ngIf также принимает функции.

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

Это может быть очень полезно, когда у вас есть несколько кодов или добавленная логика, которая определяет логический результат в вашем ng-if. Я использую это довольно часто.

Ответ 3

Я был в тупике в аналогичной ситуации, используя ng-if с условным "Существует ли элемент строкового массива?"

После нескольких попыток (например, с использованием "typeof" ) я нашел, что использование "indexOf" очень хорошо работает для того, что мне нужно:

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

Ответ 4

Убедитесь, что у вас установлена последняя версия Angular, она не была доступна в ранних версиях ~ v1.0.1

Ответ 5

ng-if принимать такие же, как JS-код (странно), поэтому вам не нужно использовать {{}}, вместо этого передайте ваши данные json примерно так.

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