当无法使用 ng-class 时（例如在设置 SVG 样式时），我使用以下有条件地设置类 attr：

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

相同的方法应该适用于其他属性类型。

（我认为您需要使用最新的不稳定 Angular 才能使用 ng-attr-，我目前使用的是 1.1.4）

---

您可以在属性前面加上 ng-attr 来评估 Angular 表达式。当表达式的结果未定义时，这会从属性中删除值。

<a ng-attr-href="{{value || undefined}}">Hello World</a>

将产生（当值为假时）

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

所以不要使用 false，因为这会产生单词“false”作为值。

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

在指令中使用此技巧时。如果指令的属性缺少值，则它们的属性将为 false。

例如，以上将是错误的。

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

---

我通过努力设置属性来完成这项工作。并使用属性的布尔值控制属性的适用性。

这是代码片段：

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

我希望这有帮助。

---

在最新版本的 Angular (1.1.5) 中，它们包含了一个名为 ngIf 的条件指令。它与 ngShow 和 ngHide 的不同之处在于元素没有隐藏，而是根本不包含在 DOM 中。它们对于创建成本高但未使用的组件非常有用：

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

---

为了让属性基于布尔检查显示特定值，或者如果布尔检查失败则完全省略，我使用了以下内容：

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

示例用法：

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

将根据 params.type 的值输出 <div class="itWasTest"> 或 <div>

---

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

将在 isTrue=true 时产生：<h1 contenteditable="true">{{content.title}}</h1>

当 isTrue=false : <h1>{{content.title}}</h1>

---

关于已接受的解决方案，Ashley Davis 发布的解决方案，所描述的方法仍然在 DOM 中打印属性，而不管它被分配的值是未定义的事实。

例如，在具有 ng-model 和 value 属性的输入字段设置上：

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

不管 myValue 背后是什么，value 属性仍然会打印在 DOM 中，因此会被解释。然后，Ng-model 被覆盖。

有点不愉快，但使用 ng-if 可以解决问题：

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

我建议在 ng-if 指令中使用更详细的检查:)

---

你也可以使用这样的表达式：

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

---

几个月前，我实际上写了一个补丁来做到这一点（在有人在 freenode 上的#angularjs 中询问它之后）。

它可能不会被合并，但它与 ngClass: https://github.com/angular/angular.js/pull/4269 非常相似

无论是否合并，现有的 ng-attr-* 东西都可能适合您的需求（正如其他人所提到的），尽管它可能比您建议的更多 ngClass 风格的功能有点笨拙。

---

对于输入字段验证，您可以执行以下操作：

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

仅当 discountType 定义为 % 时，才会将属性 max 应用于 100

---

编辑：这个答案与Angular2+有关！对不起，我错过了标签！

原答案：

至于如果设置了某个 Input 值，您只想应用（或设置）一个属性的非常简单的情况，它就像

<my-element [conditionalAttr]="optionalValue || false">

它与以下内容相同：

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

（因此，如果给定，则应用 optionalValue，否则表达式为 false 并且不应用属性。）

示例：我有这样的情况，我让应用颜色但也应用任意样式，其中颜色属性不起作用，因为它已经设置（即使没有给出 @Input() 颜色）：

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

因此，“style.color”仅在有颜色属性时才设置，否则可以使用“styles”字符串中的颜色属性。

当然，这也可以通过

[style.color]="color" 

和

@Input color: (string | boolean) = false;

---

能够得到这个工作：

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

这里的好处是，如果 item.isSelected 为 false，则根本不会呈现该属性。

---

以防万一您需要 Angular 2 的解决方案，那么它很简单，使用如下所示的属性绑定，例如，您想让输入有条件地只读，然后在方括号中添加 attrbute，后跟 = 符号和表达式。

<input [readonly]="mode=='VIEW'"> 

---