什么是在AngularJS有条件地应用属性的最佳方式?(What is the best way t

2019-08-18 04:50发布

我需要能够“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 。 这是从不同的ngShowngHide在的元素是不能隐藏,但在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}}">

这将属性应用max100只有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?