Yeni başlayanlar için basit angularJS örneği: ng-show kullanımı

UYGULAMA: Kullanıcı sayfada ismini girecek, ardından cinsiyet seçecek.

'erkek' seçerse askerlik durumu yapıldı/ yapılmadı seçenekleri gözükecek.

Yapılmadı seçilirse 'muaf' veya 'tecilli' seçenekleri görünür olacak.

(fotoğrafta yapıldı yazmak yerine yapıldı yazmışım. aşağıda düzelttim ama kusura bakmayın.)

kopyalanabilir kodlar aşağıdadır:

    <input type="text" ng-model="adsoyad" placeholder="adsoyad" /> <br />

   cinsiyet: <select ng-model="cinsiyet">

        <option value="0">erkek</option>

        <option value="1">kadın</option>

    </select> <br />

    <div ng-show="cinsiyet==0">

       

        askerlik durumu: <select ng-model="askerlikdurumu">

            <option value="0">yapıldı</option>

            <option value="1">yapılmadı</option>

        </select> <br />

    </div>

    <div ng-show=" askerlikdurumu==1">

        askerlik sonucu: <select ng-model="askerliksonucu">

            <option value="0">tecilli</option>

            <option value="1">muaf</option>

        </select><br />

    </div>

Ekran çıktıları:

 

 

. . .

Eğer ng-show yerine ng-if ile yapsaydık yapıldı yapılmadı seçeneğine kadar sorunsuz çalışırdı. Ancak askerlik sonucu kısmı görünür duruma gelmezdi. Bunun nedeni ng-if kodları daha güvenilir kılmak adına ayrı pencerede açıp kapatıyor gibi düşünebiliriz.

Google Plus'da Paylaş

Yazar gezen mühendis

Yazar hakkında bilgi yazılacak.