angular.js笔记 ---关于Tabs切换

正在CodeShcool上学习angular.js，记录一点自己觉得可以记录的东西，方便以后查看

<section ng-init="tab = 1" ng-controller="PanelController as panel">
    <ul class="nav nav-pills">
        <li ng-class="{ active:tab === 1}">
            <a href ng-click="tab = 1">Description</a>
        </li>
        <li ng-class="{ active:tab === 2}">
            <a href ng-click="tab = 2">Description</a>
        </li>
        <li ng-class="{ active:tab === 3}">
            <a href ng-click="tab = 3">Description</a>
        </li>
    </ul>
    <div class="panel" ng-show="tab === 1">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="tab === 2">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="tab === 3">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
</section>

上面的的代码是angular写的点击切换tab键，还有另一种更简洁的方式如下：

app.js:
app.controller("PanelController",function(){
    this.tab = 1;

    this.selectTab = function(setTab){
        this.tab = setTab;
    }

    this.isSelectTab = function(checkTab){
        return this.tab === checkTab
    }
})

html:
<section ng-init="tab = 1" ng-controller="PanelController as panel">
    <ul class="nav nav-pills">
        <li ng-class="{ active:panel.isSelectTab(1)}">
            <a href ng-click="panel.selectTab(1)">Description</a>
        </li>
        <li ng-class="{ active:panel.isSelectTab(2)}">
            <a href ng-click="panel.selectTab(2)>Description</a>
        </li>
        <li ng-class="{ active:panel.isSelectTab(3)}">
            <a href ng-click="panel.selectTab(3)">Description</a>
        </li>
    </ul>
    <div class="panel" ng-show="panel.isSelectTab(1)">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="panel.isSelectTab(2)">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="panel.isSelectTab(3)">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
</section>