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

来源：互联网发布：达内科技设计网络营编辑：程序博客网时间：2024/06/06 14:27

正在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>

0 0