disable a menu item in Angular uib-dropdown

Question

In my angular template I'm creating a dropdown menu using angular-ui, I need to disable some of the list items based on a property of the "company" object defined in the ng-repeat.

I already tried the disabled tag or the ng-disabled directive but without success. How can i achieve that?

My current code:

<div class="btn-group" uib-dropdown is-open="dropdown-open">
    <button id="companyDropDown" type="button" class="btn btn-default"
     uib-dropdown-toggle>
         {{companyDescr}}<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu"
     aria-labelledby="companyDropDown">
        <li role="menuItem" ng-repeat="company in companyContracts">
            <a ng-click="selectContract(company)">{{company.address}}</a>
        </li>
    </ul>
</div>

Any help would be greatly appreciated!

Answer 1

You could use the disabled class from Bootstrap with ng-class directive from Angular.

HTML

 <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="companyDropDown">
    <li  ng-class="{'disabled': company.disabled }" role="menuItem" ng-repeat="company in companyContracts">
        <a ng-click="selectContract(company)">{{company.address}}</a>
    </li>
</ul>

EDIT

According to Bootstrap documentation, the disabled class must be applied to the <li> element.