Using Angular ng-attr for the disabled attribute

Question

I am trying to use ng-attr to conditionally add an attribute to an element. My code is something like this:

<label for="theID" 
       ng-attr-disabled="{{true || undefined}}"
       class="control-label">
  Some Label
</label>

What I get by inspecting the element is this:

<label translate="" for="theID" 
       ng-attr-disabled="{{true || undefined}}" 
       class="control-label ng-scope" disabled="disabled">
  Some Label
</label>

But expectation is:

<label translate="" for="theID" 
       ng-attr-disabled="{{true || undefined}}" 
       class="control-label ng-scope"
       disabled>
  Some Label
</label>

am I wrong altogether about how it works?

Thanks

Try it without the curly quotes (though that's going to just evaluate to true, but whatever). — Amy Blankenship
– Amy Blankenship, Commented Apr 14, 2017 at 15:39
Then it looks like this: ng-attr-disabled="true || undefined" — Mark
– Mark, Commented Apr 14, 2017 at 15:42
Yes, but true || undefined will always evaluate to true. So why even bother with ng-attr? Why not just use disabled? — Amy Blankenship
– Amy Blankenship, Commented Apr 14, 2017 at 15:48
"true" is just to make a point. There will be a real expression. So, why "disabled" attribute is getting a value? — Mark
– Mark, Commented Apr 14, 2017 at 15:55

Radek Anuszewski · Accepted Answer · 2017-04-14 15:48:45Z

4

I don't think you should care about it, in your case. When value is falsy, disabled is not present. When value is truthy, is present - and it's all about presence in HTML about attributes like this (like required on inputs, validation care about presence required="false" makes input required). For example, you can style it dependent on attribute presence: MDN Attribute selectors.

answered Apr 14, 2017 at 15:48

Radek Anuszewski

1,9408 gold badges36 silver badges64 bronze badges

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

3 Comments

Mark Over a year ago

Read my comment, please.

Mark Over a year ago

But I need to get it without any value. Is that possible?

Radek Anuszewski Over a year ago

@Mark I think you can only do it with plain DOM operation: stackoverflow.com/a/18774169/3368498 . You can try label translate="" for="theID" id="label1" ng-init="$ctrl.addDisabled('label1')" and inside addDisabled(id) you can do $document.querySelector("#" + id).setAttribute("disabled", "")

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Angular has a special directive for the disabled attribute:

<label for="theID" 
        ̶n̶g̶-̶a̶t̶t̶r̶-̶d̶i̶s̶a̶b̶l̶e̶d̶=̶"̶{̶{̶t̶r̶u̶e̶ ̶|̶|̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶}̶}̶"̶
        ng-disabled="true || undefined"
        class="control-label">
    Some Label
</label>

From the Docs:

ngDisabled

directive in module ng

This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) if the expression inside ngDisabled evaluates to truthy.

A special directive is necessary because we cannot use interpolation inside the disabled attribute. See the interpolation guide for more info.

— AngularJS ng-disabled Directive API Reference

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 14, 2017 at 16:43

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Comments

MDF · Accepted Answer · 2020-07-18 20:07:05Z

0

If you want to disable element in Angular 4+ just add disabled attribute with your condition

<label for="theID" 
 disabled="condition"
 class="control-label">
    Some Label
</label>

answered Jul 18, 2020 at 20:07

MDF

1,3431 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using Angular ng-attr for the disabled attribute

3 Answers 3

3 Comments

ngDisabled

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

ngDisabled

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related