ng-classと条件を使用してアンカータグを無効にする

Question

count coulmn &このcountには<a>タグがhrefのページがあります。 すべてcount > 0のリンクを表示し、count=0を無効にします。

私はAngularJS - ng-disabled not working for Anchor tagを試してみましたが、ng-disabledを使用すると、役に立たないことを知っているようになりましたしました。

ng-classを使用すると、私はng-classに条件を指定できません。

P.S. 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を使用を適用したい場合。

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

リンクservice.numberOfScenarios === 0のために表示されません：cursor:not-allowedあなたはまた、このようなものを使用することができますが、クラスでそれを持っている場合は、すでにng-class="{'yourclassname':angular-condition}"

ことによってそれを適用し、CSSです。 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>