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的值按预期在“ 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"是truthy。因此，字符串"true"和"false"都被评估为“真”，并且该按钮始终处于启用状态。

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

请参见Why mixing interpolation and expressions is bad practice。

始终启用ng-disabled的按钮

2 个答案: