button with ng-disabled always enabled

Question

I'm trying to conditionally enable/disable my Save button using ng-disabled:

<button type="button" title="Save Changes" ng-click="onSaveChanges()"
        ng-disabled="{{!data.modified}}">
  Save
</button>

I have a $scope.data.modified variable that changes to true when my data has been modified. Regardless whether that is true or false, the Save button is enabled. Element inspection reveals that the value of ng-disabled toggles between "true" and "false" as expect but the button is always enabled.

Thanks, I just discovered this as well. I'm never clear when to use the {{}} in Angular. Is there a golden rule when to use them and when not to? — Hilo, May 13 '13 at 19:35

score 25 · Accepted Answer · answered May 13 '13 at 19:42

25

when you are using a angular js attribute (like ng-show, ng-hide, ng-disabled) it should be without the snake notation Ex.ng-disabled="!data.modified" . For other ordinary attribute like class, id you have to use it with the snake notation. Ex. class={{aVaribaleinControllerScope}}

answered May 13 '13 at 19:42

Rajkamal Subramanian

6,884
4
52
69

2

Thank you ! I'd not heard the term snake notation I like it – wmitchell Oct 30 '14 at 19:33
1

I think he got it the other way around, he means CamelCase for somethingLikeThis and snake notation for something-like-this (http://en.wikipedia.org/wiki/Snake_case, http://en.wikipedia.org/wiki/CamelCase), unless you mean {{ looks like a snake...it is fun but Snake case is already defined. – Christophe Roussy Nov 11 '14 at 16:51

score 0 · Answer 2 · answered Jan 22 '19 at 14:49

Element inspection reveals that the value of ng-disabled toggles between "true" and "false" as expect but the button is always enabled.

Remove the double curly brackets ({{ }}) from the Angular expression:

<button type="button" title="Save Changes" ng-click="onSaveChanges()"
        ̶n̶g̶-̶d̶i̶s̶a̶b̶l̶e̶d̶=̶"̶{̶{̶!̶d̶a̶t̶a̶.̶m̶o̶d̶i̶f̶i̶e̶d̶}̶}̶"̶>̶
        ng-disabled="!data.modified">
  Save
</button>

The double curly brackets convert the Angular expression to a string. In JavaScript, the string "false" is truthy. Hence both strings "true" and "false" evaluate as truthy and the button is always enabled.

Directives which expect boolean values won't work.

See Why mixing interpolation and expressions is bad practice.

button with ng-disabled always enabled

2 Answers2

Linked

Related