AngularJS İfade
- Önceki Sayfa AngularJS Tanıtımı
- Sonraki Sayfa AngularJS Modülü
AngularJSİfadeVerileri HTML'e bağlar.
AngularJS İfade
AngularJS ifadeleri çift büyük parantez içinde yazılabilir:{{ expression }}
.
AngularJS ifadeleri düzenleyiciler içinde de yazılabilir:ng-bind="expression"
.
AngularJS ifadeleri çözümleyecek ve ifadenin yazıldığı konumda sonuçları döndürecektir.
AngularJS İfadeçok benzer JavaScript ifadesi:Onlar kelime olarak, işleçler ve değişkenler içerebilir.
Örnek {{ 5 + 5 }} veya {{ firstName + " " + lastName }}
örnek
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>İlk ifadem: {{ 5 + 5 }}</p> </div> </body> </html>
Eğer kaldırdıysanız ng-app
Düzenleyici, HTML ifadeleri tam olarak gösterir, çözümleme yapmaz:
örnek
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div> <p>İlk ifadem: {{ 5 + 5 }}</p> </div> </body> </html>
Angaje ettiğiniz herhangi bir konumda ifade yazabilirsiniz, AngularJS basitçe ifadeyi çözümleyecek ve sonuçları döndürecektir.
Örnek: AngularJS'in CSS özelliklerinin değerini değiştirmesi.
Aşağıdaki giriş kutusunun rengini değiştirmek için değerini değiştirin:
açık maviörnek
<div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div>
AngularJS sayıları
AngularJS sayıları JavaScript sayılarına benzer:
örnek
<div ng-app="" ng-init="quantity=1;cost=5"> <p>Toplam miktar (dolar): {{ quantity * cost }}</p> </div>
kullanarak ng-bind
aynı örnek:
örnek
<div ng-app="" ng-init="quantity=1;cost=5"> <p>Toplam miktar (dolar): <span ng-bind="quantity * cost"></span></p> </div>
ng-init kullanımı nadir. Kontrolcülerle ilgili bölümlerde daha iyi veri initilizasyon yöntemlerini öğreneceksiniz.
AngularJS dizgileri
AngularJS dizgileri JavaScript dizgilerine benzer:
örnek
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'"> <p>İsim {{ firstName + " " + lastName }}</p> </div>
ng-bind kullanımı ile aynı örnek:
örnek
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'"> <p>İsim <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS nesneleri
AngularJS nesneleri JavaScript nesnelerine benzer:
örnek
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}"> <p>İsim {{ person.lastName }}</p> </div>
ng-bind kullanımı ile aynı örnek:
örnek
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}"> <p>İsim <span ng-bind="person.lastName"></span></p> </div>
AngularJS dizileri
AngularJS dizileri JavaScript dizilerine benzer:
örnek
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>Üçüncü sonuç {{ points[2] }}</p> </div>
ng-bind kullanımı ile aynı örnek:
örnek
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>Üçüncü sonuç <span ng-bind="points[2]"></span> dir</p> </div>
AngularJS ifadeleri ile JavaScript ifadeleri
JavaScript ifadesi gibi, AngularJS ifadeleri Literal, işlevsellik ve değişkenler içerebilir.
JavaScript ifadesinden farklı olarak, AngularJS ifadeleri HTML içine yazılabilir.
AngularJS ifadeleri şart ifadeleri, döngüler ve istisnaları desteklemezken, JavaScript ifadeleri destekler.
AngularJS ifadeleri filtreleri desteklerken, JavaScript ifadeleri desteklemez.
JavaScript hakkında bilgi edinmek için bizim JavaScript eğitimimize göz atın.
- Önceki Sayfa AngularJS Tanıtımı
- Sonraki Sayfa AngularJS Modülü