ng disabled button is always on

Question

I am trying to conditionally enable / disable the 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 changed. Regardless of whether it is true or false, the Save button is enabled. Checking the elements shows that the ng-disabled value switches between true and false, as expected, but the button is always on.

Answer 1

when you use the angular js attribute (e.g. ng-show, ng-hide, ng-disabled), it should be without an Ex snake designation. ng-disabled="!data.modified" . For another common attribute, such as class, id, you should use it with snakeskin notation. Ex. class={{aVaribaleinControllerScope}}

Answer 2

Checking the elements shows that the ng-disabled value switches between true and false, as expected, but the button is always on.

Remove the double curly braces ( {{ }} ) from the angle 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> 

Double curly braces convert an angular expression to a string. In JavaScript, the string "false" is true . Therefore, both "true" and "false" are evaluated as true, and the button is always on.

Directives that expect boolean values ​​will not work.

See why mixing interpolation and expressions is bad practice .