AngularJS ng-disabled not working with list items

Question

I am facing a problem with disabling a item in the list.

<div id="searchdropdown">
    <ul>
        <li>list1</li>
        <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li>
        <li>list3</li>
    </ul>
</div>

It does not work with ng-disabled.

I also tried with:

<li ng-class="disabled:someCondition" click="changeStatus()"> list2
</ li> 

It also does not work. Can anyone suggest something?

Answer 1

I'm assuming it is a search box of some kind.

ngDisabled is really used for interactive elements and not list items.

You can use ng-if or ng-hide to remove those items completely from the list:

<li ng-if="!condition" ng-click="changeStatus()">item</li>
<li ng-hide="condition" ng-click="changeStatus()">item</li>

You can use ngClass to apply a specific class when disabled to make it appear disabled:

<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>

If you want an item to be visible but not click-able, you may have to do a hack like re-opening the search box if the item is disabled or sinking the event.