Bukic Bukic - 7 months ago 33
HTML Question

ng-disabled for href tag in list item not working

What I need is to disable click on

<a>
tag that is in list item in ui list so it wont show include me
<div>
that i have on clicks(except for last list item). I tried with ng-disabled on list item attribute directly and also only in
<a>
tag to add ng-disabled but i am still able to click. Below is my view.

<div class="tab-pane">

<ul class="nav nav-tabs nav-default tab-sm">
<li class=""><a data-ng-click="vm.sub = 'one'" data-toggle="tab"><strong>
Text 1</strong></a>
</li>
<li class=""><a data-ng-click="vm.sub = 'two'" data-toggle="tab"><strong>
Text 2</strong></a>
</li>
<li class=""><a data-ng-click="vm.sub = 'three'" data-toggle="tab"><strong>
Text 3</strong></a>
</li>
<li id="viewAllItems" class="active pull-right"><a data-ng-click="vm.sub = 'four'" data-toggle="tab"><strong>
Text 4</strong></a>
</li>
</ul>

</div>

<div class="tab-content">
<div data-ng-show="vm.sub == 'one'" data-ng-include="'src/app/....tpl.html'"></div>
<div data-ng-show="vm.sub == 'two'" data-ng-include="'src/app/....tpl.html'"></div>
<div data-ng-show="vm.sub == 'three'" data-ng-include="'src/app/....tpl.html'"></div>
<div data-ng-show="vm.sub == 'four'" data-ng-include="'src/app/....tpl.html'"></div> <!-- ngRepeat inside of this template -->
</div>


I checked value for vm.enableClick it is false for sure.

Answer

You cannot use ng-disable on a <a> tag, instead you can use a class and the css property pointer-events:none so the click will go through the link.