I am using ng-disabled, I like it. It's working good for me for input and buttons. For anchor tag not working. How can I fix?
HTML code
<a ng-disabled="addInviteesDisabled()">Add</a>
JS code
$scope.addInviteesDisabled = function() {
return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
};
There is no disabled attribute for hyperlinks. You can do this:
.disabled {
cursor: not-allowed;
}
<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>
$scope.disabled = function() {
if($scope.addInviteesDisabled) { return false;}
}
You could create a linkDisabled css class, and apply it to your anchor:
<style>
.linkDisabled {
cursor: not-allowed;
pointer-events: none;
color: grey;
}
</style>
You can do this through CSS, no fancy directives needed. Just use ng-class to apply a class sort of like this:
ng-class:
ng-class="{disabledLink: disabledFunction()}"
css:
.disabledLink {
color: #ccc;
pointer-events:none;
}
full credit to-