AngularJS'de şartlı olarak nitelikleri uygulamanın en iyi yolu nedir?

Ben kapsamda bir boole değişkene dayalı, örneğin elemanlara "contenteditable" eklemek mümkün olması gerekir.

Örnek kullanım:

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

İçerik $scope.editModeayarlanmışsa öğeye contenteditable = true öğesinin eklenmesiyle sonuçlanır true. Bu ng sınıfı benzeri nitelik davranışını uygulamanın kolay bir yolu var mı? Bir yönerge yazmayı ve paylaşmamayı düşünüyorum.

Düzenleme: Benim önerilen attrs yönergesi ve ng-bind-attrs arasında bazı benzerlikler olduğunu görüyorum, ama 1.0.0.rc3 kaldırıldı , neden öyleyse?

Ng sınıfı kullanılamaz (örneğin SVG stil) zaman koşullu olarak sınıf attr ayarlamak için aşağıdaki kullanıyorum:

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

Aynı yaklaşım, diğer özellik türleri için de geçerli olmalıdır.

(Ng-attr- kullanmak için en son dengesiz açısal olmanız gerektiğini düşünüyorum, şu anda 1.1.4'deyim)

ng-attrBir Açısal ifadeyi değerlendirmek için niteliklerin önüne önek ekleyebilirsiniz . İfadelerin sonucu tanımsız olduğunda, bu değer öznitelikten kaldırılır.

<a ng-attr-href="{{value || undefined}}">Hello World</a>

Üretecek (değer yanlış olduğunda)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

Bu yüzden kullanmayın falseçünkü bu değer olarak "false" kelimesini üretecektir.

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

Bu hileyi bir direktifte kullanırken. Bir değerin eksik olması durumunda yönerge nitelikleri yanlış olur.

Örneğin, yukarıdakiler yanlış olur.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Bu özelliği zor ayarlayarak aldım. Ve öznitelik için boole değerini kullanarak özniteliğin uygulanabilirliğini denetleme.

Kod pasajı şöyledir:

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

Umarım bu yardımcı olur.

Angular'ın (1.1.5) en son sürümünde, adlı bir koşullu yönerge eklediler ngIf. Öğelerden farklıdır ngShowve ngHideiçinde öğeler gizlenmez, ancak DOM'a hiç dahil edilmez. Oluşturulması pahalı olan ancak kullanılmayan bileşenler için çok kullanışlıdır:

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

Bir Boole çekine dayalı olarak belirli bir değeri göstermek için bir öznitelik almak veya boolean denetimi başarısız olursa, tamamen atlanmak için aşağıdakileri kullandım:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Örnek kullanım:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

Çıktı <div class="itWasTest">veya <div>değeri dayalıparams.type

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

isTrue = true olduğunda üretilir: <h1 contenteditable="true">{{content.title}}</h1>

ve isTrue = false olduğunda: <h1>{{content.title}}</h1>

Kabul edilen çözümle ilgili olarak, Ashley Davis tarafından yayınlanan yöntem, tarif edilen yöntem, atanmış değerin tanımlanmamış olmasına bakılmaksızın, DOM'daki niteliği hala yazdırır.

Örneğin, hem bir ng modeli hem de bir değer özniteliğine sahip bir giriş alanı kurulumunda:

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

MyValue'nun arkasında ne olursa olsun, değer özelliği DOM'da hala yazdırılır, dolayısıyla yorumlanır. Ng-model daha sonra geçersiz kılınır.

Biraz tatsız, ama ng-if kullanmak hile yapar:

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

Ben ng-if direktifleri içinde daha ayrıntılı bir kontrol kullanmanızı tavsiye ederim :)

Ayrıca şöyle bir ifade kullanabilirsiniz:

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

Aslında birkaç ay önce bunu yapmak için bir yama yazdım (birisi freenode üzerindeki #angularjs'de sorduktan sonra).

Muhtemelen birleştirilmeyecek, ancak ngClass ile çok benzer: https://github.com/angular/angular.js/pull/4269

Birleştirilmiş olsun ya da olmasın, varolan ng-attr- * şeyler muhtemelen ihtiyaçlarınız için uygundur (diğerlerinin de belirttiği gibi), ancak önerdiğiniz daha ngClass tarzı işlevsellikten biraz daha karmaşık olabilir.

Giriş alanı doğrulaması için şunları yapabilirsiniz:

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

Bu özellik geçerli olacaktır maxiçin 100yalnızca discountTypeolarak tanımlanır%

Edit : Bu cevap Angular2 +! Üzgünüm, etiketi kaçırdım!

Orijinal cevap:

Bir özelliği yalnızca belirli bir Giriş değeri ayarlanmışsa uygulamak (veya ayarlamak) için çok basit bir duruma gelince, bu kadar kolay

<my-element [conditionalAttr]="optionalValue || false">

Aynı:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(Bu nedenle, isteğe bağlı olarak verilirse, isteğe bağlıDeğer uygulanır, ifade yanlıştır ve öznitelik uygulanmaz.)

Örnek: Renk özniteliğinin önceden ayarlandığı gibi çalışmadığı (ancak @Input () rengi verilmemiş olsa bile) bir rengi değil, rastgele stilleri de uygulayabildiğim durumum vardı:

@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;
...
}

Dolayısıyla, "style.color" yalnızca renk özniteliği varken ayarlanmış, aksi takdirde "styles" dizesindeki renk özniteliği kullanılabilir.

Tabii ki, bu da elde edilebilir

[style.color]="color" 

ve

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

Angular 2 için çözüme ihtiyacınız varsa, basit, aşağıdaki gibi özellik bağlama kullanın, örneğin girdiyi yalnızca koşullu olarak okumak istiyorsanız, ardından kare parantezlere attrbute ve ardından = sign ve expression ekleyin.

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

Bu çalışmayı başardı:

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

Buradaki güzel şey, item.isSelected yanlışsa, özniteliğin işlenmemesidir.