在 AngularJS 中，ng-disabled 指令可用于禁用 HTML 元素。它接受一个布尔值作为参数，如果该值为 true，则元素将被禁用。这对于动态控制表单元素的启用/禁用状态非常有用。但是，在某些情况下，我们可能希望使用一个条件表达式来动态地启用和禁用元素，而不是一个简单的布尔值。然而，当使用条件表达式时，我们需要注意一些陷阱。
问题描述
考虑以下示例：
<input type="text" ng-model="name"> <button ng-disabled="!name || name.length < 5">Save</button>
在上面的代码中，我们使用了一个条件表达式来检查输入字段是否为空或长度是否小于 5。如果满足这两个条件之一，保存按钮将被禁用。
现在假设用户已经在输入框中输入了一个有效的名称，并且保存按钮已经被禁用。现在用户想要更改名称并尝试重新启用保存按钮。为此，他将删除输入框中的文本，以便名称成为空字符串。但是，不幸的是，保存按钮不会被重新启用。这是因为在 AngularJS 中，当条件表达式首次变为 false 时，绑定的元素将被禁用，并且即使条件表达式后来再次变为 true，元素也不会被重新启用。
解决方案
要解决这个问题，我们需要在条件表达式中添加一个独特的标识符，以便每当条件表达式发生变化时，我们都能够重新启用元素。这可以通过以下方式实现：
<input type="text" ng-model="name">
<button ng-disabled="!name || name.length < 5"
ng-attr-disabled="{{ (name && name.length >= 5) ? undefined : 'disabled' }}">Save</button>在上面的代码中，我们使用了 ng-attr-disabled 指令来动态地设置 disabled 属性。如果名称不为空且长度大于等于 5，则禁用属性将被移除并且按钮将被重新启用。否则，禁用属性将被添加，并且按钮将被继续禁用。
结论
在 AngularJS 中，ng-disabled 指令非常有用，但是当它与条件表达式一起使用时，可能会导致一些问题。为了避免这些问题，我们需要在条件表达式中添加特殊的标识符来动态地启用和禁用元素。希望这篇文章能够帮助你更好地理解和应用 AngularJS 中的 ng-disabled 指令。
参考代码：
-- -------------------- ---- -------
--------- -----
----- -------
------
---------------- ----------- ----------- ---- --- -----------------
------- ------------------------------------------------------------------------------------
-------
------
------------- ----------- ----------- ---- --- --------------
------ ----------- ----------------
------- ------------------ -- ----------- - --
-------------------- ----- -- ----------- -- -- - --------- - ---------- -----------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26668