<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
/*标题 列表 */
#btn_group {
list-style: none;
margin: 0 auto;
width: 850px;
}
#btn_group li {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid black;
float: left;
margin: 5px;
text-align: center;
}
#content {
width: 800px;
height: 400px;
border: 1px solid black;
overflow: hidden;
clear: both;
margin: 0 auto;
position: relative;
}
#content div {
position: absolute;
top: 0;
left: 0;
}
.btn_in {
background: blue;
}
.selected {
background-color: lightgreen;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script src="lib/angular.min.js" ></script>
<script>
var myapp= angular.module("myApp",[]);
myapp.controller("myCtr",["$scope",function($scope){
$scope.xz=0;
$scope.lists=["韦作铭","罗兵","伊喜龙","谢帅康"];
$scope.show=function(i){
$scope.xz=i;
}
$scope.stus=[{name:'罗兵',age:23,sex:"男"},{name:'伊喜龙',age:22,sex:"男"},{name:'谢帅康',age:21,sex:"男"}];
}]);
</script>
</head>
<body ng-controller="myCtr">
<ul id="btn_group">
<li ng-repeat="title in lists" ng-class="{selected: $index==xz }" ng-click="show($index)">
{{title}}
</li>
</ul>
<br />
<br />
<br />
<br />
<div align="center" ng-app="">
<ul>
<li ng-show="1">当值为true时显示,false不显示</li>
<li ng-hide="0">当值为true时隐藏,false显示</li>
<li ng-show="1">+++++++++++++++++++</li>
<li ng-show="xz==0">韦作铭</li>
<li ng-show="xz==1">罗兵</li>
<li ng-show="xz==2">伊喜龙</li>
<li ng-show="xz==3">谢帅康</li>
<li ng-show="1">+++++++++++++++++++++</li>
</ul>
</div>
<div align="center" ng-controller="myCtr">
<ul>
<li ng-repeat="a in lists">{{$index}} {{a}}</li>
</ul>
人员信息
<ul ng-init="dogs=[{name:'韦作铭',age:23}]">
<li ng-repeat="stu in dogs">
编号:{{$index}} 姓名:{{stu.name}}年龄:<span ng-bind="stu.age"></span>
</li>
</ul>
组员列表
<ul>
<li ng-repeat="stu in stus">
编号:{{$index+1}} 姓名:{{stu.name}}年龄:{{stu.age}}
</li>
</ul>
</div>
</body>
</html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
/*标题 列表 */
#btn_group {
list-style: none;
margin: 0 auto;
width: 850px;
}
#btn_group li {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid black;
float: left;
margin: 5px;
text-align: center;
}
#content {
width: 800px;
height: 400px;
border: 1px solid black;
overflow: hidden;
clear: both;
margin: 0 auto;
position: relative;
}
#content div {
position: absolute;
top: 0;
left: 0;
}
.btn_in {
background: blue;
}
.selected {
background-color: lightgreen;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script src="lib/angular.min.js" ></script>
<script>
var myapp= angular.module("myApp",[]);
myapp.controller("myCtr",["$scope",function($scope){
$scope.xz=0;
$scope.lists=["韦作铭","罗兵","伊喜龙","谢帅康"];
$scope.show=function(i){
$scope.xz=i;
}
$scope.stus=[{name:'罗兵',age:23,sex:"男"},{name:'伊喜龙',age:22,sex:"男"},{name:'谢帅康',age:21,sex:"男"}];
}]);
</script>
</head>
<body ng-controller="myCtr">
<ul id="btn_group">
<li ng-repeat="title in lists" ng-class="{selected: $index==xz }" ng-click="show($index)">
{{title}}
</li>
</ul>
<br />
<br />
<br />
<br />
<div align="center" ng-app="">
<ul>
<li ng-show="1">当值为true时显示,false不显示</li>
<li ng-hide="0">当值为true时隐藏,false显示</li>
<li ng-show="1">+++++++++++++++++++</li>
<li ng-show="xz==0">韦作铭</li>
<li ng-show="xz==1">罗兵</li>
<li ng-show="xz==2">伊喜龙</li>
<li ng-show="xz==3">谢帅康</li>
<li ng-show="1">+++++++++++++++++++++</li>
</ul>
</div>
<div align="center" ng-controller="myCtr">
<ul>
<li ng-repeat="a in lists">{{$index}} {{a}}</li>
</ul>
人员信息
<ul ng-init="dogs=[{name:'韦作铭',age:23}]">
<li ng-repeat="stu in dogs">
编号:{{$index}} 姓名:{{stu.name}}年龄:<span ng-bind="stu.age"></span>
</li>
</ul>
组员列表
<ul>
<li ng-repeat="stu in stus">
编号:{{$index+1}} 姓名:{{stu.name}}年龄:{{stu.age}}
</li>
</ul>
</div>
</body>
</html>