by show a simple ‘tabbing’ example’, this page explains about ‘ng-click’, ‘ng-init’, and ‘ng-class’ directives.
First Phase
<section>
<ul class=”nav nav-pills”>
<li> <a href ng-click=”tab = 1″> Tab 1 </a> </li>
<li> <a href ng-click=”tab = 2″> Tab 2 </a> </li>
<li> <a href ng-click=”tab = 3″> Tab 3 </a> </li>
</ul>
<div class=”panel” ng-show=”tab === 1″>
</div>
<div class=”panel” ng-show=”tab === 2″>
</div>
<div class=”panel” ng-show=”tab === 3″>
</div>
</section>
- ng-click directive launches a work
- in the example, it puts 1, 2, and 3 values into the ‘tab’ variable.
- furthermore, only a <div> area will be displayed by ‘tab’ variable.
Second Phase
<section ng-init=”tab = 1″>
…….
</section>
- ng-init directive can initialize the value of a variable.
- however, initializing the value of a variable would be better in a related controller.
Third Phase
<section ng-init=”tab = 1″>
…….
<li ng-class=”{ class_name:tab === 1}”>
<a href ng-click=”tab = 1″> Tab 1 </a>
</li>
…….
</section>
- ng-class directive takes an array of key and value.
- if the value (tab === 1) is true, the key (class_name) will be added as a class to the tag (<li>)
- if the value is false, class_name won’t be added.
between me and dev 