javascript - 始终启用 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

当您使用 Angular 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"是truthy。因此，字符串"true"和"false"评估都是真实的，并且按钮始终处于启用状态。

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

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