Angularjs direktiflerini kullanarak hiç javascript kodu yazmadan tab örneği hazırladık.
Örnekte kullanılan direktifler şunlardır;
- ng-app
- ng-init
- ng-class
- ng-click
- ng-switch
- ng-switch-when
Kısaca kodlarımız
<body ng-app ng-init="tab = 'tab1'">
<div id="tab">
<ul class="tab">
<li ng-class="{active: tab == 'tab1'}">
<a href="#" ng-click="tab = 'tab1'">1. tab</a>
</li>
<li ng-class="{active: tab == 'tab2'}">
<a href="#" ng-click="tab = 'tab2'">2. tab</a>
</li>
<li ng-class="{active: tab == 'tab3'}">
<a href="#" ng-click="tab = 'tab3'">3. tab</a>
</li>
</ul>
<div ng-switch="tab">
<div class="tab-content" ng-switch-when="tab1">
1. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab2">
2. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab3">
3. tab içeriği
</div>
</div>
</div>
</body>