Tüm tabloya zaten uygulanmış bir sınıfım olduğunda (örneğin, <myClass tbody tr:nth-child(even) td>
tek sıralarına uygulanan bir renk), çizelgesi öğelerinin içindeki sınıfları uygularken sorunlarla karşılaştım. Öğeyi, Geliştirici Araçları ile incelediğinizde, element.style
'un bir stil atanmamış olduğu anlaşılmaktadır. Yani ng-class
kullanmak yerine, ng-style
kullanmayı denedim ve bu durumda, yeni CSS özniteliği element.style
içinde görünür.
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
MyVar ben değerlendiriyorum budur, ve her durumda CSS uyguladığı cari stili üzerine yazar myvar değerine bağlı olarak her <td>
bir stil uygulamak: Bu kod benim için büyük işler tüm tablo için sınıf.
GÜNCELLEME
Örneğin tabloya bir sınıf uygulamak isterseniz, bir sayfayı ziyaret veya diğer durumlarda, bu yapıyı ne zaman kullanabileceğini: Temelde
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
, ne Bir ng-class'u aktive etmenin gerekeni, uygulanacak sınıf ve doğru ya da yanlış bir ifadedir. True sınıfı uygular ve yanlış yapmaz. Yani burada biz iki sayfanın rotanın kontrolleri ve aralarındaki bir VEYA var, bu yüzden /route_a
YA ise biz aktif sınıf uygulanacak, route_b
içindedir.
Bu, yalnızca doğru veya yanlış döndüren sağda bir mantık işlevine sahip çalışır.
Yani ilk örnekte, ng tarzı üç ifadeleri belirleniyordu. Eğer hepsi yanlışsa, herhangi bir stil uygulanmaz, fakat mantığımızı takiben, en azından bir tanesi uygulanacaktır, bu yüzden mantık ifadesi hangi değişken karşılaştırmasının doğru olduğunu ve boş olmayan bir dizinin her zaman doğru olduğunu kontrol edecektir. geri dönüş olarak bir dizi yaptı ve tüm yanıt için VEYA kullanıyorsak, kalan stil uygulanacaktır, tek bir gerçek ile.
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
YENİ GÜNCELLEME
Burada gerçekten yararlı buluyorum şey var: Bu arada
, sana fonksiyon isActive() vermeyi unuttum.
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
: örneğin, bir değişkenin değerine bağlı olarak bir sınıfı uygulamak gerektiğinde, div
içeriğine bağlı olarak bir simge, siz (ng-repeat
çok yararlı) aşağıdaki kodu kullanabilirsiniz izlemek için Font Awesome
yararlı makale http://tech-blog.maddyzone.com/javascript/conditionally-apply-classes-in-angularjs –