Отключить тег привязки с помощью ng-класса и условия

0

У меня есть таблица, которая имеет count coulmn, и этот count имеет тег <a> с href на странице. Я хочу показать ссылку для всех count > 0 и отключить для count=0.

Я пробовал AngularJS-ng-disabled, не работающий для тега Anchor, и узнал, что использование ng-disabled бесполезно.

Использование ng-class поможет, но я не могу указать условие в ng-class.

PS Я хочу, чтобы cursor:not-allowed писать в ng-class. Невозможно изменить CSS

Здесь мой HTML-код

<tr ng-repeat="service in services">
    <td>{{$index+1}}</td>
    <td>{{service.serviceName}}</td>
    <td><a href="#/info/{{service.id}}">{{service.numberOfScenarios}}</a></td>
</tr>

numberOfScenarios отображает count.

Теги:

2 ответа

1
Лучший ответ

Если вы просто хотите показать основную информацию, используйте ng-show.

Если вы хотите применить какие-либо классы, используйте ng-class. cursor:not-allowed - это CSS, если вы его уже на классе уже применяете его по ng-class="{'yourclassname':angular-condition}"

Вы также можете использовать что-то вроде этого:

<td>
    <a ng-href="#/info/{{service.id}}" ng-show="service.numberOfScenarios > 0"><span ng-bind="service.numberOfScenarios></span></a>
</td>

Ссылка не будет отображаться для service.numberOfScenarios === 0. Тогда не нужно добавлять CSS.

Обновить:

<td>
    <a ng-href="#/info/{{service.id}}" ng-show="service.numberOfScenarios > 0">
        <span ng-bind="service.numberOfScenarios"></span>
    </a>
    <span ng-show="service.numberOfScenarios === 0" ng-bind="service.numberOfScenarios" style="cursor:not-allowed;"></span>
</td>
Поделиться
  • 0
    Все нормально. Но я хочу показать 0 без ссылки на него. значение count должно быть показано
  • 0
    Это тоже работает .. Спасибо !!! Над кодом @nitz тоже работал, но не то, что я искал.
Показать ещё 2 комментария
1

Вы можете использовать как devjsp, чтобы скрыть ссылку.

Или вы можете использовать что-то вроде этого.

<a ng-href="count > 0 ? '#/info/{{service.id}}' : ''">Google</a>

Обновлено:

<span ng-show="count > 0">
    <a href="#/info/{{service.id}}">Link</a>
</span>
<span ng-show="count === 0" class="notAllowedClass">
    0 <!-- As you suggested in another answer that you want to show 0 count -->
</span>
Поделиться
  • 0
    Для count=0 ссылка все еще будет там .. Я не хочу саму ссылку.
  • 0
    Да работает !! Спасибо. Мне понравилось, как @devjsp делал, потому что он не прописывал 0 в HTML. Но в любом случае оба работают ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню