Geek Answers Handbook

Disable menu item in Angular uib-dropdown

In my angular template, I create a drop-down menu using angular -ui , I need to disable some list items based on the property of the company object defined in ng-repeat.

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

My current code is:

<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!

+5
source share
1 answer

You can use the disabled class from Bootstrap with the 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, a disabled class must be applied to the <li> element.

+3
source

More articles:


All Articles