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.

Your title says you want to disable it (which is not valid for `a` elements), but your question says you're trying to hide it. Can you please clarify? — Jacob Stamm, Feb 22 '22 at 19:11
So the problem is it does not work for elements. KK, is there a way to disable it? — Rodri6uez, Feb 22 '22 at 19:18
I forgot to add this to my answer, but one of the CSS properties you'll want to be in your `disabled` CSS rule is [`pointer-events: none`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) — Jacob Stamm, Feb 22 '22 at 22:36

score 1 · Answer 1 · answered Feb 22 '22 at 19:27

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>

score 1 · Answer 2 · answered Feb 23 '22 at 00:30

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>

score 0 · Accepted Answer · answered Feb 24 '22 at 21:21

0

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

answered Feb 24 '22 at 21:21

Rodri6uez

399
1
5
14

AngularJS - ng-disabled is not disabling my element

3 Answers3