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
– Jacob Stamm, Commented Feb 22, 2022 at 19:11
So the problem is it does not work for <a> elements. KK, is there a way to disable it? — Rodri6uez
– Rodri6uez, Commented Feb 22, 2022 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 — Jacob Stamm
– Jacob Stamm, Commented Feb 22, 2022 at 22:36

Jacob Stamm · Accepted Answer · 2022-02-22 19:27:45Z

1

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>

answered Feb 22, 2022 at 19:27

Jacob Stamm

1,9083 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GQ. · Accepted Answer · 2022-02-23 00:30:18Z

1

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>

answered Feb 23, 2022 at 0:30

GQ.

112 bronze badges

Comments

Rodri6uez · Accepted Answer · 2022-02-24 21:21:38Z

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, 2022 at 21:21

Rodri6uez

4971 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

AngularJS - ng-disabled is not disabling my element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related