There is a span tag with glyphicon icon that I want to disable.But ng-disabled is not working, that is the icon is still clickable.

<span ng-disabled="true" class="glyphicon glyphicon-trash" style="font-size:13px;" aria-hidden="true" ng-click="DeleteIpAdress(objIpAdress)" ng-show="objIpAdress.ShowRemoveButton" ng-model="objIpAdress.ShowRemoveButton" title="Delete IP address"></span>

Is anything wrong in the tag?

There is a span tag with glyphicon icon that I want to disable.But ng-disabled is not working, that is the icon is still clickable.

<span ng-disabled="true" class="glyphicon glyphicon-trash" style="font-size:13px;" aria-hidden="true" ng-click="DeleteIpAdress(objIpAdress)" ng-show="objIpAdress.ShowRemoveButton" ng-model="objIpAdress.ShowRemoveButton" title="Delete IP address"></span>

Is anything wrong in the tag?

• javascript
• html
• angularjs

• 1 what do you mean by disabling a span tag ? – ngLover Commented Nov 17, 2015 at 7:47
• used only to button or form element docs.angularjs.org/api/ng/directive/ngDisabled – Rohit Azad Malik Commented Nov 17, 2015 at 7:48
• ng-disabled="true" ==> $scope.true, so you need set variable $scope.true = true; and, of course, it's strange, that you disable span tag :D – KoIIIeY Commented Nov 17, 2015 at 7:49
• if you want set TRUE to ng-disabled, try ng-disabled="'1'" or ng-disabled="" - "" for empty string – KoIIIeY Commented Nov 17, 2015 at 7:53
• @KoIIIeY, as I remember, you are wrong about assignment. If there is no true in scope, it will be the real true. – Qwertiy Commented Nov 17, 2015 at 7:53

4 Answers 4

ng-disabled directive works only with input fields and buttons. It does not work with span. Ref: ngDisabled Documentation

You can prevent click action using following code

ng-click="isClickAllowed && DeleteIpAdress(objIpAdress)"

ng-disabled doesn't work on span.So I disabled the click

ng-click="disabledConditionHere || DeleteIpAdress(objIpAdress)"

and then changed the style of span by using class

.disable-span{
    color: #E6E6E6;
    cursor: not-allowed;
}

and used class in span tag

class="disable-span"

I had this same problem once, from memory the solution is to put the disabled condition in the ng-click.

ng-click="disabledConditionHere || DeleteIpAdress(objIpAdress)"

if you are using bootstrap add bootstrap class btn btn-xs to the span tag. This will fix ng-disabled for span tag. Works in firefox.