Eki.20

AngularJS (1.3 / 1.5) Eğitimi: İfadeler (Expressions ng-model)

İfadeler, değişken değerlerini veya AngularJS metotlarına göre işlem yapmayı tanımlar. Direktifler

{{ ifade }} işaretleri arasında yazılır. Bu işaretler arasında yazılan kodlar AngularJS tarafından işlenir. Şimdi birkaç uygulama örneği yapalım.

İfade Kullanımında Sayı ve Metin İşlemleri

Örneklerimizi incelerken {{ isim }} şeklinde tanımlama yapmıştık. Bu tanımlamada metin kullandık. İfadelerde sadece metinler değil, sayılarla da işlemler yapılabilir. Birkaç örnek yapıp sonuçlarına bakalım…

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" > </script>
  </head>
  <body>
    <div >
      <p> 5 + 2 = {{ 5 + 2 }} </p>
      <p> 5 x 2 = {{ 5 * 2 }}  </p>
      <p> 5 / 2 = {{ 5 / 2 }} </p>
      <p> 7 - 2 = {{ 5 + 2 }}  </p>
    </div>
  </body>
</html>

Bu sayfa bize şu çıktıyı verir:

5 + 2 = 7
5 x 2 = 10
5 / 2 = 2.5
7 – 2 = 7

Sayı İfade Değerlerini Metin Kutularından Almak

input etiketlerinin type attribute değerini number yaptığımızda sayı değerleri alabildiğimizi hatırlayın.

<div ng-app >
    <input type="number" ng-model="sayi1" style="width:30px"> + 
    <input type="number" ng-model="sayi2" style="width:30px"> = {{ sayi1 + sayi2 }}
</div>

Metin İfade Değerlerini Metin Kutularından Almak

Aynı örneği metin türü ile yapalım…

<div ng-app >
    <input type="text" ng-model="metin1" style="width:50px"> + 
    <input type="ext" ng-model="metin2" style="width:50px"> = {{ metin1+ metin2 }}
</div>

Direktif İçinde Metin Yazdırmak

Direktif içinde metin yazdırmak için “ “ kullanabilirsiniz (Etiket yazdıramazsınız!). Metin ile değişkenleri birleştirmek için + birleştirme operatörü kullanılır.

<div ng-app >
    <input type="text" ng-model="metin1" style="width:50px"> + 
    <input type="ext" ng-model="metin2" style="width:50px"> = {{ metin1+ metin2 + " öğreniyorum." }} 
</div>

ng-init ile Değişkenleri ve Değerleri Tanımlama

Kapsama alanı içerisinde isterseniz bazı değişkenler ve değerler tanımlayabilirsiniz. Aynı örnek üzerinden gidelim…

<div ng-app ng-init="metin1='Angular';metin2='JS';sayi1=5;sayi2=3" >
    {{metin1 + metin2}}<br>{{sayi1 + sayi2}}
</div>

Gördüğünüz gibi ng-app kapsama alanında ng-init oluşturup = operatörü ekledikten sonra çift tırnak “ “ içinde tüm değişkenlerimizi tanımladık. Her bir değişkene değer ataması yaparken yine = operatörünü kullandık. Nesneleri birbirinden ayırmak için de noktalı virgül ; ile ayırma işlemi yaptık. Sayı değerleri doğrudan atanırken, metin değerleri tek tırnak ‘ ‘ içerisinde yazdırıldı.

ng-init ile Dizi ve Obje Nesneleri Tanımlamak

Şimdi birer dizi ve obje tanımlayıp içindeki değerleri okutalım…

<div ng-app ng-init = "sayilar = [sayi=3, sayi=5]; metinler = {isim:'Uğur', soyisim:'Gelişken'}" >
      <p data-ng-repeat="sayi in sayilar">{{ sayi }}</p>
      <p>{{ metinler.isim }} {{ metinler.soyisim }}</p>
</div>

3
5
Uğur Gelişken

ng-init içinde sayilar isminde bir dizi, metinler isminde de bir obje oluşturduk. Dizi içinde 3 ve 5 değerlerini tanımladık. Fakat daha önceki görmüş olduğumuz dizi tanımlamalarında hatırlayacağınız üzere herhangi bir tanımlama yapmıyorduk. Bunda sayi adında belirteçler kullandık. Bu belirteçlerle değerlere erişeceğiz.

metinler adlı objede ise isim ve soyisim adlarında birer özellik tanımlayıp değerleri verdik.

sayilar adlı dizideki verileri yazdırırken de dizileri bir döngü içinde yazdırdık. AngularJS’de for in döngüsü bulunmaz. Bunun yerine data-ng-repeat direktifi vardır. Bu direktif ile sayi in sayilar şeklinde döngü oluşturduk ve her döngü sonucunda da sayi değişkenini çekip yazdırdık.

metinler objesinde de alt özellikleri ile erişimi yapıp değerleri çekebildik.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum