始终启用ng-disabled的按钮

Question

我正在尝试使用ng-disabled有条件地启用/禁用我的保存按钮：

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

我有一个$ scope.data.modified变量，当我的数据被修改时，该变量变为true。 无论是真还是假，都会启用“保存”按钮。 元素检查显示ng-disabled的值按预期在“true”和“false”之间切换，但按钮始终处于启用状态。

Answer 1

当你使用角度js属性（如ng-show，ng-hide，ng-disabled）时，它应该没有蛇符号Ex。 ng-disabled="!data.modified" 。 对于像class，id这样的其他普通属性，你必须使用蛇符号。 防爆。 class={{aVaribaleinControllerScope}}

Answer 2

元素检查显示ng-disabled的值按预期在“true”和“false”之间切换，但按钮始终处于启用状态。

从Angular表达式中删除双花括号（ {{ }} ）：

<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>

双花括号将Angular表达式转换为字符串。 在JavaScript中，字符串"false"是真实的 。 因此，字符串"true"和"false"评估为真实，并且按钮始终处于启用状态。

期望布尔值的指令不起作用。

请参阅为什么混合插值和表达式是不好的做法