Yazar: Ahmet Çağlayan

Angular input[month] Direktifleri

Angular input[month] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Codepen Ön izlemesi

Kullanım Şekli:

<input type=”month”
ng-model=”string”
[name=”string”]
[min=”string”]
[max=”string”]
[ng-min=””]
[ng-max=””]
[required=”string”]
[ng-required=”string”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
Posted on by Ahmet Çağlayan 0

Angular input[email] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Codepen Ön izlemesi

Kullanım Şekli:

<input type=”email”
ng-model=”string”
[name=”string”]
[required=”string”]
[ng-required=”string”]
[ng-minlength=”number”]
[ng-maxlength=”number”]
[pattern=”string”]
[ng-pattern=”string”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol girişi kontrolü adı.
ng-minlength (optional) Minimum eposta sınırını ayarlar.
ng-maxlength (optional) Maximum eposta sınırını ayarlar.
ng-pattern (optional) Verilen maç deseni ile giriş tipi numarasını doğrulayın.
required (optional) Giriş tipini doğrular.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
Posted on by Ahmet Çağlayan 0

Angular input[datetime-local] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Not: Birçok modern tarayıcı henüz bu giriş türünü desteklemez.

Codepen Ön izlemesi

Kullanım Şekli:

<input  type = “datetime-local”
ng-model = “string”
[ name = “string” ]
[ min = “string” ]
[ max = “string” ]
[ ng-min = “” ]
[ ng-max = “” ]
[ required = “string” ]
[ ng-required = “string” ]
[ ng-change = “string” ] >

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
Posted on by Ahmet Çağlayan 0

Angular input[date] Direktifleri

Angular input[date] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Not: Birçok modern tarayıcı henüz bu giriş türünü desteklemez.

Codepen Ön izlemesi

Kullanım Şekli

<input type=”date”
ng-model=”string”
[name=”string”]
[min=”string”]
[max=”string”]
[ng-min=””]
[ng-max=””]
[required=”string”]
[ng-required=”string”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
Posted on by Ahmet Çağlayan 0

Angular input[checkbox] Direktifleri

Angular input[checkbox] Direktifleri

Checkbox giriş değerleri için aşağıdaki ng komutlarıyla süsleyebilirsiniz. Bu özelliklerin açıklamalarını yine sitemizde bulabilirsiniz.

Codepen Ön izlemesi

Kullanım Şekli:

<input type=”checkbox”
ng-model=”string”
[name=”string”]
[ng-true-value=”expression”]
[ng-false-value=”expression”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
ng-true-value (optional) Seçildiğinde oluşacak değer ayarlanabilir.
ng-false-value (optional) Seçili değil iken oluşacak değer ayarlanabilir.
ng-change (optional) Giriş, giriş elemanı ile kullanıcı etkileşimi nedeniyle değiştiğinde belirtilen ifade devreye girecek.
Posted on by Ahmet Çağlayan 0

Angular input Direktifleri

Angular input Direktifleri

Bazı input türleri için eski tarayıcılar desteklemesede (input[file]) HTML için girdileri kontrol etmeniz için güzel bir yöntemdir. İnputa ne türde, kaç karakterli deperler girileceğini sınırlandırmaları yapabilirsiniz. Bunların dışına çıkıldığında kullanıcılara hata gösterebilirsiniz. Genel olarak bütün bu işlemleri html üzerinden yapmanız mümkün olacaktır.

Codepen Ön izlemesi

Kullanım Şekli

<input
ng-model=”string”
[name=”string”]
[required=”string”]
[ng-required=”boolean”]
[ng-minlength=”number”]
[ng-maxlength=”number”]
[ng-pattern=”string”]
[ng-change=”string”]
[ng-trim=”boolean”]>
…
</input>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
ng-trim (optional) Bu komut ile boş alanları temizleyin.
Posted on by Ahmet Çağlayan 0

Angular form Direktifleri

Angular form Direktifleri

Angularjs javascript frameworkleri arasında formlara bakış açısı en güzel olan framework dememizde sanırım bir sakınca yoktur. Formu post etmeden önce validliğini en iyi kontrol edebileceğiniz yöntemdir. Formların geçerliliğini aşağıdaki özelliklerden yararlanarak kullanıca belirtebilirsiniz.

Codepen Ön izlemesi

CSS Klasları

ng-valid: form geçerli ise ayarlanır.

ng-invalid: form geçersiz ise ayarlanır.

ng-pending: form bekleme durumunda ise ayarlanır.

ng-pristine: form henüz doldurulmamış ise ayarlanır.

ng-dirty:  form doldurulmaya başlanmış ise ayarlanır.

ng-submitted: form gönderildiğinde ayarlanır.

Posted on by Ahmet Çağlayan 0

Angular a Direktifi

Angular a Direktifi

href özelliği boş olduğunda varsayılan eylemi önlenmiş olur, böylece html A etiketinin varsayılan davranışını yerine getirir ve sayfa yenilenmeden işlem yapabilmenize olanak sağlar.

Örnek

<a href="" ng-click="list.addItem()">Add Item</a>
Posted on by Ahmet Çağlayan 0

angular.toJson Fonksiyonu

angular.toJson Fonksiyonu

Angularjs toJSON işlevi ile JSON biçimli dizi girdisini serileştirmeyi amaçlanmıştır.

Örnek

var mySource1 = [{isim : 'Jimi', yaş : '30'},{isim : 'Tom', yaş : '23'}]  
var mySource3 = {adres : '12-13/A12', telefon : '111-111-1111'}  
  
document.write(angular.toJson(mySource1));  
document.write("</br>");  
document.write(angular.toJson(mySource3));  
document.write("</br>");

Codepen Ön izlemesi

Kullanımı:

angular.toJson(obj, pretty);

Posted on by Ahmet Çağlayan 0

angular.reloadWithDebugInfo Fonksiyonu

angular.reloadWithDebugInfo Fonksiyonu

Açık hata ayıklama bilgileri ile mevcut uygulamayı yeniden yüklemek için bu işlevi kullanın. Bu fonksiyon çağrı önceliklidir $compileProvider.debugInfoEnabled(false)

Örnek

app.config(['$compileProvider', function ($compileProvider) {
  // disable debug info
  $compileProvider.debugInfoEnabled(false);
}]);

 

Posted on by Ahmet Çağlayan 0