ng Anahtar içinde tire bulunan sınıf stili


165

Umarım bu, özellikle çizme kullanan stilleri olan bir baş ağrısını kurtarır, özellikle bootstrap çok popüler hale geldiğinden.

Açısal 1.0.5 kullanıyorum

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

In ngClass belgelerinde , örneğin basit, ama aynı zamanda ifade boole değerlere sınıf adlarının bir harita olabilir bahseder. Boole değişkenine bağlı olarak , önyükleme belgelerinde gösterildiği gibi, simgemdeki "simge-beyaz" stilini kullanmaya çalışıyordum .

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

Yukarıdaki satır çalışmıyor. Doğru icon-whiteolduğunda sınıfa eklenmez someBooleanValue. Ancak, anahtarı olarak değiştirirsem, iconWhitesınıf değerleri listesine başarıyla eklenir. Bir tire ile nasıl değer eklenir?


1
Merhaba, SO'ya hoş geldiniz! Sorunuzu bir soruya bölmek için güncellemelisiniz ve bir soruyu yanıtlayın - kendi sorunuzu cevaplamak TAMAM ve yararlı ise teşvik edilir. Bu şekilde yanıtınızı kabul edebilirsiniz ve arama yapan diğer kişiler sorunun başarılı bir cevabı olduğunu görebilir.
— Alex Osborn

Önerin için teşekkürler!
— Foo L

Yanıtlar:


364

Saatlerce hacklendikten sonra, çizgi enterpole olur! Tırnak işaretleri gereklidir.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

Umarım bu, birinin saçlarını yırtmasına yardımcı olur.

GÜNCELLEME:

Angular'ın eski sürümlerinde, ters eğik çizgi kullanmak da hile yapar, ancak daha yeni sürümlerde değildir.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

Birincisi muhtemelen tercih edilir, çünkü en sevdiğiniz düzenleyicide daha kolay arayabilirsiniz.


15
Bunun için teşekkür ederim. Ben de bu konuda ÇOK ÇOK zaman harcadım.
— taudep

2
Teşekkür ederim!!! Bunun olduğunu biliyordum ama nasıl çözeceğimi bilmiyordum. TEŞEKKÜRLER!
— Mark Ford

1
AngularJS 1.2.3 kullanıyorum. "\ -" benim için çalışmıyor. "" "çok iyi çalıştı.
— bobzsj87

1
Diğer örnekleri izlediğimde bunun neden işe yaramadığını merak ediyordum!
— nevster

$ scope.someBooleanValue = true
— zloctb

11

\'icon-white\' iyi çalışıyor (AngularJS 1.2.7 ile)


En iyi cevap, geleceğe en uygun ve geriye dönük uyumlu olduğu için
— Eric Steinborn

2
Selam! @EricSteinborn Gelecekten geliyorum, sizi uyarmaya geldim: Bu hiç de kolay değil!
— Yazım hatası

0

ng sınıfı kullanımları için alternatif:

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.