SORU
11 Aralık 2012, Salı


Nasıl koşullu olarak AngularJS CSS stilleri uygulamak mı?

Q1. Her "bir" ana kullanıcı "" düğmesine basıldığında. silmeden önce silme işlemi için işaretler öğenin görünümünü değiştirmek istiyor sanırım (Bu anında görsel geri bildirim meşhur ihtiyacı "emin misin" iletişim kutusu.). ortadan kaldırmak gerekir Kullanıcı silinmesi gerektiğini belirtmek için onay kutularını kontrol edin. Eğer bir onay kutusu işaretli ise, bu maddenin normal haline geri döner.

Geçerli veya CSS stil kaldırmak için en iyi yolu nedir?

S2. Her kullanıcı siteme nasıl sunulur kişiselleştirmek için izin istiyorum sanırım. E. g., yazı tipi boyutlarını sabit bir dizi, kullanıcı tanımlı ön plan ve arka plan renklerini sağlar, select vb.

Kullanıcı/giriş seçer CSS stil uygulamak için en iyi yolu nedir?

CEVAP
11 Aralık 2012, Salı


Açısal yerleşik şartlı/dinamik: CSS stil değiştirmek için yönergeler sağlar

  • ng-class- CSS stilleri kümesi statik/önceden bilinen kullanın
  • ng-styletarzı değerleri dinamik olarak değişebilir, çünkü bir CSS sınıfı tanımlamak zaman kullanın. Stil değerleri programlanabilir kontrol düşünüyorum.
  • ng-showveng-hide- eğer sadece sen ya da bir şey göstermek veya gizlemek için gerekiyorsa kullanın (değiştirir CSS)
  • ng-ifeğer sadece tek bir koşulu denetlemek için gerekirse - yeni sürümde 1.1.5, daha ayrıntılı ng-anahtarı yerine kullanın (değiştirir DOM)
  • ng-switch- birkaç birbirini dışlayan ng-show yerine kullanın (değiştirir DOM)
  • ng-disabledveng-readonly- form elemanı hareketlerini kısıtlamak için kullanın
  • ng-animate- sürüm 1.1.4 kullanın CSS3 geçişler eklemek için yeni/animasyonlar

Normal "Açısal yol" içerir bağlama modeli/scope özelliği için bir UI öğesi olduğunu kabul edecek kullanıcı giriş/manipülasyon (yani, kullanın ng-model), ve sonra da ilişkilendirerek bu modeli özellik için bir dahili direktifler yukarıda.

Kullanıcı kullanıcı arayüzü değişiklikleri, otomatik olarak Açısal sayfasında ilişkili unsurları güncellenir.


Q1 ng-sınıf -- CSS tasarım dersinde yakalanabilir için iyi bir durum gibi geliyor.

ng-class"ifade", aşağıdaki birini değerlendirmek gerekir: . bir kabul eder

  1. boşluk ile ayrılmış bir sınıf adları bir dize
  2. sınıf adları dizisi
  3. göster/boolean değerleri için sınıf isimleri nesne

Öğeleri ng-repeat kullanarak bazı dizi modeli üzerinde görüntülenir ve öğe için onay kutusunu işaretlendiğinde pending-delete sınıfı uygulamak istediğiniz varsayarsak:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

Yukarıda, ng-class ifade yazın #3 - sınıf isimleri göster/nesnesi boolean değerleri için kullandık.


S2 ng-style -- CSS stil dinamik olduğu için iyi bir durum gibi geliyor, bunun için bir sınıf tanımlayabiliriz.

ng-style"ifade" olarak değerlendirilmesi gerekir: . bir kabul eder

  1. göster/CSS değerleri için CSS stil adları nesne

Yapmacık bir örneğin, kullanıcı arka plan rengini (jQuery renk seçici, çok daha güzel olurdu) için bir texbox içine renkli bir isim yazabilirsiniz varsayalım:

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">


Yukarıdaki iki Fiddle.

Keman da bir örnek içerirng-showveng-hide. Eğer bir onay kutusu, arka plan-renk pembe dönüm ek olarak seçilirse, bazı metin gösterilir. 'Kırmızı' metin kutusuna girilir, bir dıv gizli hale gelir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Digital Bounds

    Digital Boun

    19 Temmuz 2013
  • LinusTechTips

    LinusTechTip

    25 Kasım 2008
  • Within Temptation

    Within Tempt

    18 EYLÜL 2006