Angularjs Dersleri - #4 Class ve Change İşlemleri

angularjsyoutube

2 yıl önce 0 yorum

Merhaba bugün şu konuları göreceğiz:

  • ng-bind
  • ng-change / ng-checked
  • ng-class
  • ng-copy

 ng-bind

Bu aslında normal olarak kullandığımız bind şeklinin {{}} aynısıdır. İçine girilen işlemleri berlirlendiği tag'ın içine yazar. örneğin

<span ng-bind="5*5"></span> <!-- dediğimizde içine 25 yazması gerekir -->

ng-change / ng-checked

ng-change bir seçim olayı tetiklendiğinde işlem yapar. ng-checked ise içine girilen model'e ait checkbox'ın seçildiği zaman otomatik kendisinide şeçmesini sağlar. Check All (Tümünü seç) işlemerinde kullanılabilir. Örneğin bir araba modeli seçeceğiz ve bu modellerde hepsini seç dediğimiz anda diğer tüm arabalar seçilecek.

<input type="checkbox" ng-model="tumu">Tümünü seç<br><br>
<input type="checkbox" ng-checked="tumu">Devrim<br>
<input type="checkbox" ng-checked="tumu">Tofaş<br>
<input type="checkbox" ng-checked="tumu">Tata

ng-class

Bu directive içine girilen koşul sonucunda elementin sonuna css class ekler. Örneğin bir butona tıklanınca elementin class'ını değiştirelim.

<button ng-click="secim = !secim">Class değiştir</button>
<div ng-class="{'sinif' : secim}"></div> <!-- değişecek nesne -->

ng-copy​​​​​​​

Bu directive ise bir model besleyen elementin içindeği değer kopyalandığında tetiklenir. Örneğin

<input type="text" ng-copy="copy = true" ng-model="test">
<div ng-if="copy">Kopyalandı</div>

Bugünkü konu bu kadardı görüşmek üzere :)

Düşündüklerin nedir ?

Abdurrahman Eker

(1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?