Apa cara terbaik untuk menerapkan atribut secara kondisional di AngularJS?

Saya harus dapat menambahkan misalnya "contenteditable" ke elemen, berdasarkan pada variabel boolean pada lingkup.

Contoh penggunaan:

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

Akan menghasilkan contenteditable = true ditambahkan ke elemen jika $scope.editModedisetel ke true. Apakah ada cara mudah untuk mengimplementasikan perilaku atribut seperti ini? Saya sedang mempertimbangkan untuk menulis arahan dan berbagi jika tidak.

Sunting: Saya dapat melihat bahwa tampaknya ada beberapa kesamaan antara arahan attrs yang saya usulkan dan ng-bind-attrs, tetapi telah dihapus di 1.0.0.rc3 , mengapa demikian?

Saya menggunakan yang berikut ini untuk mengatur attr kelas secara kondisional ketika ng-class tidak dapat digunakan (misalnya saat menata SVG):

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

Pendekatan yang sama harus bekerja untuk tipe atribut lainnya.

(Saya pikir Anda harus menggunakan Angular terbaru yang tidak stabil untuk menggunakan ng-attr-, saya saat ini di 1.1.4)

Anda bisa mengawali atribut dengan ng-attruntuk eval ekspresi Angular. Ketika hasil dari ekspresi tidak terdefinisi, ini menghilangkan nilai dari atribut.

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

Akan menghasilkan (ketika nilai salah)

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

Jadi jangan gunakan falsekarena itu akan menghasilkan kata "false" sebagai nilainya.

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

Saat menggunakan trik ini dalam arahan. Atribut untuk arahan akan salah jika mereka kehilangan nilai.

Misalnya, hal di atas salah.

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

Saya mendapatkan ini bekerja dengan menetapkan atribut keras. Dan mengendalikan penerapan atribut menggunakan nilai boolean untuk atribut tersebut.

Berikut ini cuplikan kode:

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

Saya harap ini membantu.

Dalam versi terbaru Angular (1.1.5), mereka telah menyertakan arahan bersyarat yang disebut ngIf. Ini berbeda dari ngShowdan ngHidedalam elemen tidak tersembunyi, tetapi tidak termasuk dalam DOM sama sekali. Mereka sangat berguna untuk komponen yang mahal untuk dibuat tetapi tidak digunakan:

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

Untuk mendapatkan atribut untuk menunjukkan nilai tertentu berdasarkan pemeriksaan boolean, atau dihilangkan seluruhnya jika pemeriksaan boolean gagal, saya menggunakan yang berikut:

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

Contoh penggunaan:

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

Apakah output <div class="itWasTest">atau <div>berdasarkan nilaiparams.type

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

akan menghasilkan ketika isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

dan ketika isTrue = false: <h1>{{content.title}}</h1>

Mengenai solusi yang diterima, yang diposting oleh Ashley Davis, metode yang dijelaskan masih mencetak atribut di DOM, terlepas dari kenyataan bahwa nilai yang telah ditetapkan tidak ditentukan.

Misalnya, pada pengaturan bidang input dengan model-ng dan atribut nilai:

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

Terlepas dari apa yang ada di balik myValue, atribut nilai masih dicetak di DOM, dengan demikian, ditafsirkan. Model-Ng kemudian, menjadi ditimpa.

Agak tidak menyenangkan, tetapi menggunakan ng-jika berhasil:

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

Saya akan merekomendasikan menggunakan cek lebih rinci di dalam arahan ng-if :)

Anda juga dapat menggunakan ekspresi seperti ini:

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

Saya benar-benar menulis tambalan untuk melakukan ini beberapa bulan yang lalu (setelah seseorang bertanya tentang hal itu di #angularjs di freenode).

Mungkin tidak akan digabung, tetapi sangat mirip dengan ngClass: https://github.com/angular/angular.js/pull/4269

Entah itu digabung atau tidak, hal-hal ng-attr- * yang ada mungkin cocok untuk kebutuhan Anda (seperti yang disebutkan orang lain), meskipun mungkin sedikit lebih janggal daripada fungsionalitas gaya ngClass yang Anda sarankan.

Untuk validasi bidang input dapat Anda lakukan:

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

Ini akan berlaku atribut maxuntuk 100hanya jika discountTypedidefinisikan sebagai%

Sunting : Jawaban ini terkait dengan Angular2 +! Maaf, saya melewatkan tag!

Jawaban asli:

Adapun kasus yang sangat sederhana ketika Anda hanya ingin menerapkan (atau mengatur) atribut jika nilai Input tertentu ditetapkan, semudah

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

Itu sama dengan:

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

(Jadi, opsional Nilai diterapkan jika diberikan sebaliknya ekspresi salah dan atribut tidak diterapkan.)

Contoh: Saya memiliki case, di mana saya membiarkan menerapkan warna tetapi juga gaya arbitrer, di mana atribut warna tidak berfungsi karena sudah diatur (bahkan jika @Input () warna tidak diberikan):

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

Jadi, "style.color" hanya disetel, ketika atribut warna ada di sana, jika tidak atribut warna dalam string "style" dapat digunakan.

Tentu saja, ini juga bisa dicapai dengan

[style.color]="color" 

dan

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

Kalau-kalau Anda membutuhkan solusi untuk Angular 2 kemudian sederhana, gunakan properti mengikat seperti di bawah ini, misalnya Anda ingin membuat input hanya dibaca secara kondisional, kemudian tambahkan kurung kurawal di attrbute diikuti dengan = tanda dan ekspresi.

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

Mungkinkah ini berfungsi:

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

Yang menyenangkan di sini adalah bahwa jika item.isSelected adalah false maka atribut tidak dirender.