Home > Article > Web Front-end > How to implement tab switching using AngularJS
This time I will show you how to use AngularJS to switch tabs and tabs. What are the things to note?The following is a practical case, let’s take a look. .
Tab one:
##JavaScript html css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> js标签页tab切换</title>
<style>
#p1 .active{
background:blue;
}
#p1 p{
width:200px;
height:200px;
background:gray;
border:1px solid black;
display:none;
}
</style>
<script>
window.onload=function (){
var op=document.getElementById('p1');
var aBtn=op.getElementsByTagName('input');
var ap=op.getElementsByTagName('p');
for(var i=0;i<aBtn.length;i++){ //遍历p1中的按钮
aBtn[i].index=i; //给aBth[]添加自定义属性
aBtn[i].onclick=function (){
for(var i=0;i<aBtn.length;i++){ //遍历按钮，将class清除
aBtn[i].className='';
ap[i].style.display='none';
}
this.className='active';
ap[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<p id="p1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<input type="button" value="选项4" />
<p style="display:block;">111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</p>
</body>
</html>
Tab two:
angularjs directives: ng-class, ng-click, ng-if<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS标签页tab切换</title>
<style>
.active {
background-color: orange;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="s1.app">
<p>
<button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
<button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
<button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</p>
<p>
<p ng-if="data.current == 1">张三的个人信息</p>
<p ng-if="data.current == 2">李四的个人信息</p>
<p ng-if="data.current == 3">王五的个人信息</p>
<script>
var app = angular.module('s1.app', []);
app.run(function ($rootScope) {
$rootScope.data = {
current: "1" // 1代表张三，2代表李四，3代表王五
};
$rootScope.actions =
{
setCurrent: function (param) {
$rootScope.data.current = param;
}
}
})
</script>
</p>
</body>
</html>
Tab three:
angularjs command: ng-class, ng-click, ng-show<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title AngularJS标签页tab切换</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-controller="myCtrl as panel">
<ul>
<li ng-class="{active:panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1)">1111111111</a>
</li>
<li ng-class="{active:panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2)">2222222222</a>
</li>
<li ng-class="{active:panel.isSelected(3)}">
<a href ng-click="panel.selectTab(3)">33333333333</a>
</li>
</ul>
<!--是否点击-->
{{panel.isSelected(1)}}
{{panel.isSelected(2)}}
{{panel.isSelected(3)}}
<p class="panel" ng-show="panel.isSelected(1)">
<h1>我是1111111111111111111111</h1>
</p>
<p class="panel" ng-show="panel.isSelected(2)">
<h1>我是22222222222222222</h1>
</p>
<p class="panel" ng-show="panel.isSelected(3)">
<h1>我是3333333333333333333333</h1>
</p>
</section>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function () {
this.tab = 2;/*设置默认*/
this.selectTab = function (setTab) {/*设置tab点击事件*/
this.tab = setTab;
};
this.isSelected = function (checkedTab) {/*页面的切换*/
return this.tab === checkedTab;
}
});
</script>
</body>
</html>
Tab four:
angularjs commandThe second and third methods are derived from the improvement of the following code, and the effects are the same .<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS标签页tab切换</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-init="tab=3">
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab=1">1111111111</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab=2">2222222222</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab=3">33333333333</a>
</li>
</ul>
<!--是否点击-->
{{tab===1}}
{{tab===2}}
{{tab===3}}
<p class="panel" ng-show="tab===1">
<h1>我是1111111111111111111111</h1>
</p>
<p class="panel" ng-show="tab===2">
<h1>我是22222222222222222</h1>
</p>
<p class="panel" ng-if="tab===3">
<h1>我是3333333333333333333333</h1>
</p>
</section>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function () {
});
</script>
</body>
</html>
But there is a difference between ng-show and ng-if
The first difference is,
ng-if This dom node is only created when the subsequent expression is true.
ng-show is created initially, use display:block and display:none to control display or non-display.
The second difference is that
ng-if will (implicitly) generate a new scope, ng-switch The same goes for , ng-include, etc. that will dynamically create an interface.
ng-model in ng-if , and binding this model to another display in the outer layer p Area, when the inner layer changes, the outer layer will not change synchronously, because there are already two variables at this time.
<p>{{name}}</p>
<p ng-if="true">
<input type="text" ng-model="name">
</p>ng-show does not have this problem because it does not come with a first-level scope. The way to avoid this kind of problem is to always bind the elements in the page to the properties of the object (data.x) rather than directly to the basic variables (x)superior. Scope in AngularJS
How to deal with the failure to install nmp Taobao image on Mac
How to operate Koa2 WeChat public account development Setting up a local development and debugging environment
The above is the detailed content of How to implement tab switching using AngularJS. For more information, please follow other related articles on the PHP Chinese website!