AngularJs Giriş 2

Bu yazımızda anguların özelliklerini görmeye devam ediyor olacağız.

Dinamik CSS Kullanımı (ng-class)

ng-class yardımıyla koşullara bağlı olarak farklı css atamaları yapabiliriz

İlk önce MyDesign.css adlı bir css dosyası oluşturarak aşağıdaki gibi iki stil ekleyelim

 

.HasCar {
background-color:green;
}

.NoCar {
background-color:red;
}

 

Daha sonra Sayfamızda bir tablo oluşturarak dinamik bir şekilde kişinin arabasının olup olmamasına göre tablodaki o satırın arkaplan rengini değiştirilelim

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.min.js"></script>
<link href="MyDesign.css" rel="stylesheet" />
</head>
<body>

<div ng-app="" ng-init="persons=[
{name:'Bilgehan',hascar:'no'},
{name:'Tayfun',hascar:'yes'},
{name:'Harun',hascar:'no'}]" >

<table>

<tr ng-repeat="person in persons" ng-class="person.hascar=='yes' ? 'HasCar' : 'NoCar'">
<td>{{person.name}}</td>
<td>{{person.hascar}}</td>
</tr>

</table>

</div>
</body>
</html>

ng-class=”person.hascar==’yes’ ? ‘HasCar’ : ‘NoCar'” burada gördüğümüz üzere eğer kişinin hascar propertisinin değeri yes ise HasCar stili değilse NoCar stili işletilerek koşula bağlı css ekleme yapılabilir.

angular1

Angularjs Filter
Gelen veriyi tarih formatına veya para formatına veya çeşitli string formlarına dönüştürebilmemize olanak sağlar.Ayrıca gelen verileri sıralama ve gösterilecek datayı limitleme konularında kullanabiliriz

Örnek olarak bir dizi tanımlayalım ve bunun ilk elemanını tüm harflerini büyük yapalım filter kullanmak icin sadece | işaretinden sonra gerekli keywordü veya expressionı yazmak yeterli olacaktır

<span>{{persons[0].name | uppercase}}</span>
Sıralama yapmak için orderby keywordünü kullanıyoruz

<tr ng-repeat=”person in persons | orderBy:’Age'”>

Descending yani tersten sıralama yapmak için ise orderby ile propertden önce – işaretini kullanabiliriz

<tr ng-repeat=”person in persons | orderBy:’-Age'”>
Gösterilecek kayıt sayısını sınırlamak için limitTo

<tr ng-repeat=”person in persons | limitTo:2″>
Tarih formatlamak için date keywordünü kullanabiliriz
{{ ‘2015-10-04T17:57:28.556094Z’ | date : ‘dd/MM/yyyy @ HH:mm’}}

Aşağıda kod olarak örnekleri mevcuttur

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/angular.min.js"></script>
    <link href="MyDesign.css" rel="stylesheet" />
</head>
<body>

    <div ng-app="" ng-init="persons=[
{name:'Bilgehan',hascar:'no',Age:'29'},
{name:'Tayfun',hascar:'yes',Age:'28'},
{name:'Harun',hascar:'no',Age:'27'}]">

        <h2>Tüm Karakterler Büyük</h2>
        <span>{{persons[0].name | uppercase}}</span>

      <h2>  Sıralama olmadan</h2>
        <table>
            <tr ng-repeat="person in persons ">
                <td>{{person.name}}</td>
                <td>{{person.hascar}}</td>
                <td>{{person.Age}}</td>
            </tr>
        </table>

        <h2> Yaşa Göre Artan Sırada</h2>
        <table>
            <tr ng-repeat="person in persons | orderBy:'Age'">
                <td>{{person.name}}</td>
                <td>{{person.hascar}}</td>
                <td>{{person.Age}}</td>
            </tr>
        </table>

      <h2>   Yaşa Göre Azalan Sırada</h2>
        <table>
            <tr ng-repeat="person in persons | orderBy:'-Age'">
                <td>{{person.name}}</td>
                <td>{{person.hascar}}</td>
                <td>{{person.Age}}</td>
            </tr>
        </table>


        <h2>ilk iki kayıt gözüksün,Görünecek dataya sayısını limitleme </h2>
        <table>
            <tr ng-repeat="person in persons | limitTo:2">
                <td>{{person.name}}</td>
                <td>{{person.hascar}}</td>
                <td>{{person.Age}}</td>
            </tr>
        </table>

         <h2>  Tarih Formatlama örneği </h2>

      Tarih:  {{ '2015-10-04T17:57:28.556094Z' | date : 'dd/MM/yyyy @ HH:mm'}}
    </div>


</body>
</html>

angular2

Bu yazı .NET kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>