Mühendisler Dünyası

Bu makalemizde AngularJS'in özelliklerinden bir olan filter'ları ve bunun tarih formatları üzerinde nasıl uygulandığını anlatmaya çalışacağım. AngularJS için filter verileri belirli bir formata dönüştürme işlemidir.  Tarih filtresi de var olan bir tarihi istediğiniz formata dönüştürmek için kullanılır. AngularJS içinde hazır tarih formatları yer alsa da bu formatlar her zaman ihtiyacımızı karşılamayabilir. Bu gibi durumları da göz önünde bulundurarak makalemde genel olarak tarih verilerinin istediğiniz formata nasıl dönüştürülebileceğini anlatmaya çalışacağım.

Web sitesi tasarlarken özellikle modallar veya açılan pencere içinde ihtiyaçlardan bir tanesi de çarpı butonudur. Bu makalemizde çarpı işaretli butonun tasarımını anlatacağım. Genel tasarımı kullanarak sizde buna göre renkleri kendinize göre dizayn edebilirsiniz. Eğer projenizde bootstrap kullanıyorsanız burada close clasını da kullanacağız. Eğer bootstrap kullanmıyorsanız aşağıdakı close sınıfı kodlarını öncelikle css dosyanıza ekleyin.

AngularJS ile çalışırken sıkça yaşanan sıkıntılardan bir tanesi de Türkçe değişken tanımlama sıkıntısıdır. Eğer nesne veya değişken tanımlama için diğer programlama dillerinde aynı zamanda javascriptteki gibi türkçe karakterler ı, ş, ğ, ü, ç, ö, kullanırsanız çalışma sırasında hata alacaksınız. Bu yüzden AngularJS ile çalışırken dikkat etmeniz gereken en önemli noktalardan bir tanesi değişken ve nesne tanımlamalarında Türkçe karakter kullan MA maya dikkat etmektir. Bir diğer önemli nokta da eğer uygulamanızın sunucu tarafından gelen objelerde Türkçe karakter kullanılmışsa ve bu nesneler de çalışma zamanında hata olmasına neden olacaktır ve Türkçe karakterlerin değiştirilerek ingilizce alfanumerik karakterlere dönüştürülmelidir. Bu noktada önemli olduğu için söylemek istiyorum. AngularJS ile çalışırken Türkçe karakter sorunu ile sadece değişken, nesne ve ya özellik tanımlaması sırasında sorun yaşarsınız. Türkçe karakterlerin ekranda gözükmesinde bir sıkıntı yaşamazsınız. Eğer böyle

Öncelikle konu başlığındaki Dinamik ID derken ne kastettiğimi anlatmak istiyorum. Bunun için bir örnek üzerinden konuyu açıklayarak konuya başlayacağım. Basit olabilmesi açısından elinizde bir tablo olduğunu düşünün. Bu tablodaki verileri tablodaki belirli bir özelliğe göre kategorize etmek istiyorsunuz. Kategorize ettikten sonra da örneğin Bootstrap Collapse kullanarak sadece tıklandığında göstermek istiyorsunuz. Sizin senaryolarınız da benzerlik içeriyorsa anlatacağım konu size faydalı olabilir. Bu işlemleri dinamik olarak yapabilmenin anahtar noktalarından bir tanesi de two-way binding destekli JavaScript Frameworklerinden birini kullanmaktan geçer.

JavaSript dilinde diziler ile çalışırken dizi içindeki bir özelliğe göre dizi içinde arama yapmak isteyebiliriz. Aşağıdaki örneği inceleyerek siz de kendi fonksiyonunuzu yazabilirsiniz. Elimizde aşağıdaki gibi bir dizi olduğunu düşünün. Dizi tanımlaması AngularJS kullandığım için aşağıdaki gibi tanımladım. Eğer bu frameworku kullanmıyorsanız normal javascript değişken tanımlama veya kendi frameworkünüze göre tanımlayın. Eğer değişkeni JSON objesi olarak tanımladıysanız aynı işlemleri yapabilirsiniz. 

JavaSript dilinde diziler ile çalışırken dizi içindeki bir özelliğin maximumunu veya en büyüğünü bulmak isteyebiliriz. Aşağıdaki örneği inceleyerek siz de kendi fonksiyonunuzu yazabilirsiniz. Elimizde aşağıdaki gibi bir dizi olduğunu düşünün. Dizi tanımlaması AngularJS kullandığım için aşağıdaki gibi tanımladım. Eğer bu frameworku kullanmıyorsanız normal javascript değişken tanımlama veya kendi frameworkünüze göre tanımlayın. Eğer değişkeni JSON objesi olarak tanımladıysanız aynı işlemleri yapabilirsiniz. 

JavaScript ile çalışırken çok kullanacağız işlemlerden bir tanesi de metin içerisindeki gereksiz karakterlerden kurtulmak olabilir. Örneğin dinamik bir şekilde metinden ID oluşturduğunuzu düşünün. ID değeri için sadece ingilizce karakterler ve rakamlar girebildiğiniz için dinamik şekilde gelen metinden gereksiz karakterleri temizlemek gerekiyor. Aşağıdaki hazır fonksiyonu kullanarak bu işlemleri kolayca yapabilirsiniz. Benim örneğimde klavye üzerinde bulunan tüm karakterler yer alsa da bu işlemde gerekli diğer karakterleri, veya eklemek istemediğiniz karakterleri diziden çıkarmak ta size kalmış. İsterseniz bu hazır kodları değiştirerek kendi kütüphaneniz haline de getirebilirsiniz.