ng-disabled on anchor inside <li> - html

Question

How can I disable drop down menu item that uses ui-router and looks like this?
<ul class="dropdown-menu">
<li><a ui-sref="state.random">A random state</a></li>
</ul>
obviously this doesn't work:
<li ng-disabled="true"><a ui-sref="state.random">A random state</a></li>
nor this:
<li><a ui-sref="state.random" ng-disabled="true">A random state</a></li>

Answer 1

ng-disabled don't work on the li tag. Need to do this using css styles.
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}
<li class="disabled"><a ui-sref="state.random">A random state</a></li>

Answer 2

Disabling might not work here. You may have to use a ternary operator with ui-sref. As I assume disabling would be conditional. The disabled style effect can be introduced with CSS.
$scope.someValue = false;
<li><a ui-sref={{someValue ? 'state.random' : ''}}>A random state</a></li>

Answer 3

I encountered a similar problem (angular 2), here is what worked for me:
HTML file:
<li (click)="onClick(item, $event)"
tooltip="{{isItemDisabled() ? getText(item.tooltipText) : undefined}}">
<a href="" role="tab" data-toggle="tab"
[ngClass]="{'disabled': isItemDisabled()}"
id="btnSelect{{getMenuLabel(tabitem)}}">{{getMenuLabel(tabitem)}}</a>
</li>
TS file:
onClick(isItemDisabled, $event) {
$event.preventDefault();
if (!isItemDisabled) {
// do whatever
}
}
CSS file:
disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}