有条件地在AngularJS中应用属性的最佳方法是什么？

我需要能够基于作用域上的布尔变量向元素添加例如“ contenteditable”。

使用示例：

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

如果$scope.editMode设置为，将导致contenteditable = true被添加到元素true。有一些简单的方法可以实现这种ng-class这样的属性行为吗？我正在考虑编写指令，如果没有，请共享。

编辑： 我可以看到我提议的attrs指令和ng-bind-attrs之间似乎有些相似之处，但是在1.0.0.rc3中将其删除了，为什么呢？

当无法使用ng-class时（例如，在设置SVG样式时），我使用以下条件来有条件地设置class 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>

会产生（当值为false时）

<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 }}">

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

<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背后是什么，价值属性仍然会在DOM中打印出来，从而得到解释。Ng模型然后被覆盖。

有点不愉快，但是使用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}}">

这将属性适用max于100仅当discountType被定义为%

编辑：此答案与Angular2 +有关！抱歉，我错过了标签！

原始答案：

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

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

等同于：

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

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

示例：我有一种情况，我可以应用一种颜色，但也可以应用一种任意样式，其中color属性由于已经设置而无法使用（即使未提供@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;
...
}

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

当然，这也可以通过

[style.color]="color" 

和

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

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

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

能够做到这一点：

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

这里的好处是，如果item.isSelected为false，则不会渲染该属性。