Попытка предоставить гиперссылку в HTML на основе условия ng-if ... не работает - PullRequest
Новая
       29

Попытка предоставить гиперссылку в HTML на основе условия ng-if ... не работает

0 голосов
/ 19 марта 2019

Я хочу предоставить ссылку на текстовое условие, используя ng-if.Если функции возвращают true, я хочу предоставить ссылку, в противном случае отображать только значение без ссылки. 

<th style="text-align:left">
<span ng-if="(mandalLink())">
<a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
</span>
<span ng-if="(!mandalLink())"> {{d}} </span>
</th>

Я использовал ng-if в других местах, и это работает, но в этом случае это не так.Что я здесь не так делаю?

1 Ответ

1 голос
/ 19 марта 2019

В вашем .html-файле попробуйте: 

<th style="text-align:left">
  <span ng-if="showLink">
    <a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
  </span>
  <span ng-if="!showLink"> {{d}} </span>
</th>

В вашем .ts-файле (в ngOnInit или где вы получаете / присваиваете значение для 'отдел' ..) 

showLink;

getDepartmentOrWhatEver(){
    ... // your logic getting 'department' assigned
   if (department == "") {
      this.showLink= false;
   }
   else {
      this.showLink= true;
   }
}

Из документов по ng-if:

Директива ngIf удаляет или воссоздает часть дерева DOM на основе {выражения}.Если выражение, присвоенное ngIf, принимает значение false, то элемент удаляется из DOM, в противном случае клон элемента повторно вставляется в DOM.

ngIf отличается от ngShow, а ngHide тем, что ngIf полностью удаляет ивоссоздает элемент в DOM, а не изменяет его видимость через свойство display css.Распространенным случаем, когда это различие является значительным, является использование селекторов css, которые полагаются на положение элемента в DOM, например псевдоклассы: first-child или: last-child.

FYI:Скобки вокруг функции не нужны, просто <span ng-if="mandalLink()"> хорошо ..

...