AngularJS - ng-disabled is not disabling my element

Question

I´m trying to hide an option if the condition exists, but the option is still there.

Here is my code:

<li role="presentation"><a role="menuitem" tabindex="-1" ng-disabled="disAplicar" ng-if="!hideBtnAplicar" ng-click="existenciaCero()">Aplicar Existencia Cero</a></li>

And my JS is:

$scope.disAplicar = $scope.datos.tipo == 'informativo' ? true : false;

Could you help me to find which the error is?

Thanks in advance.

Answer 1

It as easier than I thought. I just used ng-hide instead of disable and that´s it! Thanks to all of you.

Answer 2

If you want to simulate disabling an a element, you'll need to do it in two ways: styling and behavior. For the styling, have something like a disabled CSS class that applies programmatically using ng-class="{ 'disabled': disAplicar }". That will make it look disabled, but to make it act disabled as well, make sure your ng-click function considers the same condition.

$scope.existenciaCero = function() {
    if ($scope.disAplicar) {
        return;
    }
    // the rest of your code
}

And in the event that you're using href on the a instead of a click event, you'd want something like this, in addition to the disabled styling I mentioned:

<a ng-href="{{ disAplicar ? '/someUrl' : '#' }}">My link</a>

Answer 3

In this case you should really use a button rather than an a tag, you could style the button like an a tag here with CSS.

<li role="presentation"><button role="menuitem" tabindex="-1" ng-disabled="disAplicar" ng-if="!hideBtnAplicar" ng-click="existenciaCero()">Aplicar Existencia Cero</button></li>