我需要能够“CONTENTEDITABLE”添加例如对元素的基础上,对范围布尔变量。
使用示例:
<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>
会导致CONTENTEDITABLE =真被添加到元素,如果$scope.editMode
设置为true
。 有没有办法实现这个纳克级的样属性行为的一些简单的方法? 我考虑写一个指令,如果不能共享。
编辑:我可以看到,似乎是我提出的attrs指令和之间有一些相似之处NG绑定,ATTRS,但它是在1.0.0.rc3删除 ,为何如此?
Answer 1:
我使用有条件地设置时纳克级的不能使用的类ATTR以下(例如SVG样式时):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
同样的方法应该适用于其他的属性类型。
(我想你需要在最新的不稳定角用NG-attr-,我目前的1.1.4)
Answer 2:
您可以前缀属性ng-attr
给eval的角度表达。 当表达式的结果未定义,则此将删除属性的值。
<a ng-attr-href="{{value || undefined}}">Hello World</a>
会产生(当值为false)
<a ng-attr-href="{{value || undefined}}" href>Hello World</a>
所以,不要使用false
,因为这将产生单词“假”作为值。
<a ng-attr-href="{{value || false}}" href="false">Hello World</a>
当使用这一招的指令。 如果缺少一个值,该指令的属性将是错误的。
例如,上述将是假的。
function post($scope, $el, $attr) {
var url = $attr['href'] || false;
alert(url === false);
}
Answer 3:
我硬设置属性得到了这个工作。 并控制使用该属性的布尔值属性适用性。
以下是代码片段:
<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>
我希望这有帮助。
Answer 4:
在角(1.1.5)的最新版本,它们包括一个名为条件指令ngIf
。 这是从不同的ngShow
和ngHide
在的元素是不能隐藏,但在DOM完全不包含。 他们是这是昂贵的创建,但不使用的组件非常有用:
<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>
Answer 5:
为了得到一个属性来显示特定值基于一个布尔检查,或者如果布尔检查失败被完全省略,我用了以下内容:
ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"
实例:
<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">
将输出<div class="itWasTest">
或<div>
基于所述值params.type
Answer 6:
<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>
将产生当IsTrue运算=真<h1 contenteditable="true">{{content.title}}</h1>
并且当IsTrue运算=假<h1>{{content.title}}</h1>
Answer 7:
关于接受的解决方案中,一个张贴由阿什利戴维斯,所描述的方法仍打印在DOM属性,而不管这一事实,它已被分配的值是未定义的。
例如,在输入栏上设置既与NG-模型和value属性:
<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
不管背后有什么myvalue的, 价值属性仍然被印在了DOM,因此,解释。 然后吴模型,成为重写。
有点不愉快,但使用NG-如果做的伎俩:
<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-如果指令:)
Answer 8:
其实,我写了一个补丁,这样做几个月前(后有人在#angularjs问它freenode上)。
它可能不会被合并,但它是非常相似的ngClass: https://github.com/angular/angular.js/pull/4269
无论是被合并与否,现有的NG-attr- *的东西可能适合您的需要(如其他人所说的),尽管它可能比你所建议的更ngClass式功能笨重了一点。
Answer 9:
你也可以使用这样的表达式:
<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>
Answer 10:
对于输入字段验证,你可以这样做:
<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">
这将属性应用max
到100
只有discountType
被定义为%
Answer 11:
万一你需要再角2的简单的解决方案,使用属性结合下面一样,比如你想输入只读条件,然后在广场加括号的attrbute其次=符号和表达。
<input [readonly]="mode=='VIEW'">
Answer 12:
至于什么时候你只想要如果某输入值设定为申请(或设置)的一个属性非常简单的例子,它是一样简单
<my-element [conditionalAttr]="optionalValue || false">
这是一样的:
<my-element [conditionalAttr]="optionalValue ? optionalValue : false">
(如果给定否则表达式为假,并且不施加属性所以optionalValue被施加)。
例如:我的情况,我在那里让应用色彩,而且还随意的风格,在这里,因为它已经被设置(即使未给@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”只设定,当颜色属性在那里,否则可能被用在“风格”字符串的颜色属性。
当然,这也可以与实现
[style.color]="color"
和
@Input color: (string | boolean) = false;
文章来源: What is the best way to conditionally apply attributes in AngularJS?