нг-если (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 
} 

Issue: HTML взгляд не видно, как управление не перемещается внутри ng-if. Правильно ли синтаксис?

Answer 1

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

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

Answer 2

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

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

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

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

Answer 4

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

Answer 5

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

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