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

当前回答

我通过努力设置属性来让它工作。以及使用属性的布尔值控制属性的适用性。

下面是代码片段:

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

其他回答

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

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

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

你也可以这样表达:

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

我通过努力设置属性来让它工作。以及使用属性的布尔值控制属性的适用性。

下面是代码片段:

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

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

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

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

推荐文章