AngularJS’de ng-hide ve ng-show Direktifleri

Merhaba,

Bu içeriğimizde bir html nesnesini gizlemeyi ve göstermeyi sağlayan ng-hide ve ng-show direktifleri üzerine incelemede bulunacağız.

Birbirlerinin tersi işlevsellikte bulunan bu direktifler genel olarak aşağıdaki prototipte kullanılmaktadırlar.

--- ng-show ---
    <input type="checkbox" ng-model="Model" />
    <h3 ng-show="Model">Göster</h3>
--- ng-hide ---
    <input type="checkbox" ng-model="Model" />
    <h3 ng-hide="Model">Göster</h3>

Örnek olarak aşağıdaki kod bloğunu inceleyiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("UygulamaModule", [])
            .controller("UygulamaController", function ($scope) {
                $scope.Personeller =
                    [
                        { Adi: "Gençay", SoyAdi: "Yıldız", Memleket: "Artvin" },
                        { Adi: "Murat", SoyAdi: "Rundar", Memleket: "Bursa" },
                        { Adi: "Suzan", SoyAdi: "Çalı", Memleket: "Artvin" },
                        { Adi: "Necati", SoyAdi: "Şaşmaz", Memleket: "Çorum" },
                        { Adi: "Hülya", SoyAdi: "Demirci", Memleket: "Sakarya" },
                        { Adi: "Gülşah", SoyAdi: "Yıldız", Memleket: "Artvin" },
                        { Adi: "Cem", SoyAdi: "Kartal", Memleket: "Mardin" },
                        { Adi: "Lale", SoyAdi: "Buran", Memleket: "İzmir" },
                        { Adi: "Songül", SoyAdi: "Şarkıç", Memleket: "Mersin" }
                    ];
            });
    </script>
</head>
<body ng-app="UygulamaModule" ng-controller="UygulamaController">
    <input type="checkbox" ng-model="KolonGizle" />
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th ng-hide="KolonGizle">Memleket</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="personel in Personeller | orderBy : 'SoyAdi'">
                <td>{{personel.Adi}}</td>
                <td>{{personel.SoyAdi}}</td>
                <td ng-hide="KolonGizle">{{personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Benzer şekilde yukarıdaki uygulamayı ng-show içinde yapabilirsiniz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…