使用 ng-class 和条件禁用锚标记

Question

我显示了一个表格，其中包含 count 库尔姆和此 count 具有带有 href 到页面的 <a> 标记。 我想显示所有count > 0 的链接并禁用count=0。

我试过AngularJS - ng-disabled not working for Anchor tag，发现使用ng-disabled是没有用的。

使用ng-class 会有所帮助，但我无法在ng-class 中指定条件。

附：我希望将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。

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

Answer 2

您可以使用 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>