Question

我正在尝试使用ng-attr有条件地向元素添加属性。我的代码是这样的：

<label for="theID" 
       ng-attr-disabled="{{true || undefined}}"
       class="control-label">
  Some Label
</label>

通过检查元素我得到的是：

<label translate="" for="theID" 
       ng-attr-disabled="{{true || undefined}}" 
       class="control-label ng-scope" disabled="disabled">
  Some Label
</label>

但期望是：

<label translate="" for="theID" 
       ng-attr-disabled="{{true || undefined}}" 
       class="control-label ng-scope"
       disabled>
  Some Label
</label>

我完全错了它的工作原理吗？

由于

Answer 1

在你的情况下，我认为你不应该关心它。当值为假时，disabled不存在。如果值是真实的，则存在 - 并且所有关于HTML中存在的关于这样的属性（如输入上的required，关于存在required="false"的验证关注需要输入）。例如，您可以根据属性在线设置样式：MDN Attribute selectors。

Answer 2

Angular有disabled属性的特殊指令：

<label for="theID" 
        ̶n̶g̶-̶a̶t̶t̶r̶-̶d̶i̶s̶a̶b̶l̶e̶d̶=̶"̶{̶{̶t̶r̶u̶e̶ ̶|̶|̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶}̶}̶"̶
        ng-disabled="true || undefined"
        class="control-label">
    Some Label
</label>

来自文档：

ngDisabled

  模块ng中的
指令


如果expression，该指令设置元素的disabled属性（通常是表单控件，例如input，button，select等。内部ngDisabled评估为真实。

特殊指令是必要的，因为我们不能在disabled属性中使用插值。有关详细信息，请参阅interpolation guide。

— AngularJS ng-disabled Directive API Reference

Answer 3

如果要在Angular 4+中禁用元素，只需在条件

中添加 disabled 属性

<label for="theID" 
 disabled="condition"
 class="control-label">
    Some Label
</label>

将Angular ng-attr用于disabled属性

3 个答案:

ngDisabled