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

我需要能够添加例如“contentteditable”元素，基于范围上的布尔变量。

使用示例:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>
如果$scope.editMode设置为true，将导致contentteditable =true被添加到元素中。 是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令，如果没有共享

<强>编辑: 我可以看到，我提议的attrs指令和Ng-bind-attrs，但在1.0.0.rc3中被删除之间似乎有一些相似之处，为什么会这样呢?< / p >

294139 次浏览
小开
最佳答案

当ng-class不能使用时，我使用以下命令有条件地设置类attr(例如在样式化SVG时):

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

同样的方法也适用于其他属性类型。

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

小开

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

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

实际上我在几个月前写了一个补丁(在freenode的#angularjs中有人问过这个问题)。

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

不管它是否被合并，现有的ng-attr-*东西可能适合你的需求(正如其他人提到的)，尽管它可能比你建议的更具ngclass风格的功能要笨拙一些。

小开

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

例如，在输入字段设置中同时使用ng-model和value属性:

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

不管myValue背后是什么，价值属性仍然会被打印到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指令中使用更详细的检查:)

小开

你可以在属性前加上ng-attr来eval Angular表达式。当表达式的结果为undefined时，将从属性中删除该值。

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

我希望这能有所帮助。

小开

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

当isTrue=true时，

将产生: <h1 contenteditable="true">\{\{content.title}}</h1> < / p >

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

小开

为了让一个属性根据布尔检查显示特定的值，或者如果布尔检查失败则完全忽略，我使用了以下方法:

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="\{\{ editMode ? true : false }}"></h1>
小开

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

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

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

小开

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

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

编辑:这个答案与Angular2+有关!对不起，我漏了标签!

最初的回答:

对于非常简单的情况，如果设置了某个Input值，则只希望应用(或设置)某个属性，这很简单

<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属性存在时，Color”才被设置，否则可以使用“styles”字符串中的Color属性。

当然，这也可以通过

[style.color]="color"

而且

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

能够让这个工作:

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

这里的好处是if项。isSelected为false，则该属性不会被渲染。


提交答案