icenter user01 icenter user01 - 4 months ago 25
HTML Question

How to disable list item of dropdown in angular js using ng-disable

this is my html file

this is my dropdown having two listitems password reset and send activation email i want to disable send activation email when current state= 'not ready'.

<div class="active-send-select" pull-left btn-group title="{{::'title.button.send' | translate}}">
<button class="btn dropdown-toggle" data-toggle="dropdown" ng-disabled="user.entity.isGeUser == true">
<i class="fa fa-envelope fa-lg"></i> <span class="action-button-text">{{::'label.button.send' |
translate}}</span> <i class="icon-chevron-down pull-right"></i>
</button>
<ul class="dropdown-menu filter-state">
<li ng-disabled="currentState == 'Not ready'"><a href="" ng-click="openConfirmationModal()">{{::'label.dropdown.sendActivation' |
translate}}</a></li>
<li>
<a href="" ng-click="onPasswordReset()">
{{::'label.dropdown.resetPassword' | translate}}</a>
</li>
</ul>
</div>


this is my javascript code

$scope.currentState = 'Not ready';

Answer

You can do this without a custom $scope function:

<li ng-disabled="currentState === 'Not ready'"></li>

If that condition evaluates to true then disabled will be true. However seeing as you're putting this on a li element I don't think anything will happen. You'd be better off putting this condition on a button element.

EDIT:

The problem here is that disabled attributes have no effect on li elements. If you want to show that that list item is disabled you will need to apply either a class or a style, using ng-class or ng-style respectively.