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

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

使用示例:

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

将导致contentteditable =true被添加到元素中，如果$scope。editMode被设置为true。是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令，如果没有的话就分享。

编辑: 我可以看到，我提议的attrs指令和ng-bind-attrs指令之间似乎有一些相似之处，但它在1.0.0中被删除了。为什么是Rc3 ?

当前回答

编辑:这个答案与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"

and

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

2019-04-25 15:30:25

其他回答

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

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

只有当折扣类型定义为%时，才会将属性max应用到100

2016-04-14 18:45:06

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

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

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

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

2013-05-21 12:15:30

能够让这个工作:

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

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

2020-01-24 16:44:24

你可以在属性前加上ng-attr来计算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);
}

2014-08-01 21:06:43