AngularJs选项卡的写法有很多，每个人都会有自己的一个写法，今天我来给大家展示两种不同写法的AngularJs选项卡！
方法一：
1.创建选项卡，我是在控制器里创建数组将其渲染在页面上：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选项卡1</title> <style> #ul{ 415px; height: 50px; } #ul li{ 100px; height: 50px; line-height: 50px; border: 1px solid #c7c7c7; text-align: center; float: left; list-style: none; } </style> <script src="js/angular.min.js"></script> <script> var app=angular.module("mk",[]); app.controller("test",function($scope){ $scope.arr=[ {name:"选项1"}, {name:"选项2"}, {name:"选项3"} ]; }) </script> </head> <body ng-app="mk"> <div ng-controller="test"> <ul id="ul"> <li ng-repeat="item in arr">{{item.name}}</li> </ul> </div> </body> </html>
2.创建选项卡相对应的数据，并将它们放在一个数组里，先让第一个内容展现出来。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选项卡1</title> <style> #ul{ 415px; height: 50px; } #ul li{ 100px; height: 50px; line-height: 50px; border: 1px solid #c7c7c7; text-align: center; float: left; list-style: none; } #nr{ 400px; height: 400px; border: 1px solid #c7c7c7; } </style> <script src="js/angular.min.js"></script> <script> var app=angular.module("mk",[]); app.controller("test",function($scope){ $scope.arr=[ {name:"选项1"}, {name:"选项2"}, {name:"选项3"} ]; $scope.str1=[ {name:"选项1"}, {name:"选项1"}, {name:"选项1"} ]; $scope.str2=[ {name:"选项2"}, {name:"选项2"}, {name:"选项2"} ]; $scope.str3=[ {name:"选项3"}, {name:"选项3"}, {name:"选项3"} ]; $scope.strs=[$scope.str1,$scope.str2,$scope.str3]; $scope.str=$scope.strs[0]; }) </script> </head> <body ng-app="mk"> <div ng-controller="test"> <ul id="ul"> <li ng-repeat="item in arr" ng-click="dj($index)">{{item.name}}</li> </ul> <div id="nr"> <ul> <li ng-repeat="item in str">{{item.name}}</li> </ul> </div> </div> </body> </html>
3.接下来实现点击效果，点击选项卡显示相对应的数据。
html:
1 //在选项卡上添加一个点击事件 2 <ul id="ul"> 3 <li ng-repeat="item in arr" ng-click="dj($index)">{{item.name}}</li> 4 </ul>
js:
1 // 在控制器里添加点击事件 2 $scope.dj=function(index){ 3 $scope.str=$scope.strs[index];4 }
好了点加效果实现了，等等，还没有添加样式；
4.当点击选项卡时，给其加个红色背景，先给第一个按钮添加一个红色背景。
html:
1 // 添加一个class类名 on 2 <ul id="ul"> 3 <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}</li> 4 </ul>
js:
1// 想给第一个选项卡添加class类名 on 2 $scope.arr[0].ischecked=true; 3 // 在控制器里添加点击事件 4 $scope.dj=function(index){ 5 $scope.str=$scope.strs[index]; 6 // 循环遍历选项卡，先让所有选项卡为初始样式，点击某个让其添加class类名 on 7 angular.forEach($scope.arr,function(value,key){ 8 value.ischecked=false; 9 }); 10 $scope.arr[index].ischecked=true; 11 }
现在我把他们整体串联一下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选项卡1</title> 6 <style> 7 #ul{ 8 415px; 9 height: 50px; 10 } 11 #ul li{ 12 100px; 13 height: 50px; 14 line-height: 50px; 15 border: 1px solid #c7c7c7; 16 text-align: center; 17 float: left; 18 list-style: none; 19 } 20 #nr{ 21 400px; 22 height: 400px; 23 border: 1px solid #c7c7c7; 24 } 25 .on{ 26 background: red; 27 } 28 </style> 29 <script src="js/angular.min.js"></script> 30 <script> 31 var app=angular.module("mk",[]); 32 app.controller("test",function($scope){ 33 $scope.arr=[ 34 {name:"选项1"}, 35 {name:"选项2"}, 36 {name:"选项3"} 37 ]; 38 $scope.str1=[ 39 {name:"选项1"}, 40 {name:"选项1"}, 41 {name:"选项1"} 42 ]; 43 $scope.str2=[ 44 {name:"选项2"}, 45 {name:"选项2"}, 46 {name:"选项2"} 47 ]; 48 $scope.str3=[ 49 {name:"选项3"}, 50 {name:"选项3"}, 51 {name:"选项3"} 52 ]; 53 $scope.strs=[$scope.str1,$scope.str2,$scope.str3]; 54 $scope.arr[0].ischecked=true; 55 $scope.str=$scope.str1; 56 // 在控制器里添加点击事件 57 $scope.dj=function(index){ 58 $scope.str=$scope.strs[index]; 59 // 循环遍历选项卡，先让所有选项卡为初始样式，点击某个让其添加class类名 on 60 angular.forEach($scope.arr,function(value,key){ 61 value.ischecked=false; 62 }); 63 $scope.arr[index].ischecked=true; 64 } 65 }) 66 </script> 67 </head> 68 <body ng-app="mk"> 69 <div ng-controller="test"> 70 <ul id="ul"> 71 <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}</li> 72 </ul> 73 <div id="nr"> 74 <ul> 75 <li ng-repeat="item in str">{{item.name}}</li> 76 </ul> 77 </div> 78 </div> 79 </body> 80 </html>
方法二：
1.创建选项卡，同方法一的第一点大致相同也是在控制器里创建数组将其渲染在页面上：
<!DOCTYPE html> <html ng-app="mk"> <head lang="en"> <meta charset="UTF-8"> <title>选项卡2</title> <style> #ul{ 415px; height: 50px; } #ul li{ 100px; height: 50px; line-height: 50px; border: 1px solid #c7c7c7; text-align: center; float: left; list-style: none; } div{ 500px; height: 500px; border: 1px solid #c7c7c7; } </style> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script> var app=angular.module("mk",['ngRoute']); app.controller("test",function($scope){ $scope.arr=[ {name:"选项1",href:"#/index1" }, {name:"选项2",href:"#/index2" }, {name:"选项3",href:"#/index3" } ]; </script> </head> <body ng-app="mk"ng-controller="test">
<ul id="ul">
<li ng-repeat="item in arr"><a ng-href="{{item.href}}">{{item.name}}</a></li>
</ul>
</div>
</body>
</html>
2.在script中创建选项卡相对应的数据与其链接相对应，实现点击效果；
html:
<ul id="ul"> <li ng-repeat="item in arr" ng-click="dj($index)"><a ng-href="{{item.href}}">{{item.name}}</a></li> </ul>
// 展示内容部分 <div ng-view>
js:
<script type="text/ng-template" id="index1"> <ul> <li>选项11</li> <li>选项11</li> <li>选项11</li> </ul> </script> <script type="text/ng-template" id="index2"> <ul> <li>选项21</li> <li>选项21</li> <li>选项21</li> </ul> </script> <script type="text/ng-template" id="index3"> <ul> <li>选项31</li> <li>选项31</li> <li>选项31</li> </ul> </script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script> var app=angular.module("mk",['ngRoute']); app.controller("test",function($scope){ $scope.arr=[ {name:"选项1",href:"#/index1" }, {name:"选项2",href:"#/index2" }, {name:"选项3",href:"#/index3" } ]; }); app.config(function($routeProvider){ $routeProvider.when('/index1',{ templateUrl:"index1" }).when('/index2',{ templateUrl:"index2" }).when('/index3',{ templateUrl:"index3" }).otherwise( {redirectTo:'/index1'} ) }) </script>
3.还是添加class类名与上一方法的相同
js:
// 在控制器里添加 $scope.arr[0].ischecked=true; $scope.dj=function(index){ angular.forEach($scope.arr,function(value,key){ value.ischecked=false; }); $scope.arr[index].ischecked=true; }
方法二的完整代码：
<!DOCTYPE html> <html ng-app="mk"> <head lang="en"> <meta charset="UTF-8"> <title>选项卡1</title> <style> #ul{ 415px; height: 50px; } #ul li{ 100px; height: 50px; line-height: 50px; border: 1px solid #c7c7c7; text-align: center; float: left; list-style: none; } div{ 500px; height: 500px; border: 1px solid #c7c7c7; } .on{ background: red; } </style> <script type="text/ng-template" id="index1"> <ul> <li>选项11</li> <li>选项11</li> <li>选项11</li> </ul> </script> <script type="text/ng-template" id="index2"> <ul> <li>选项21</li> <li>选项21</li> <li>选项21</li> </ul> </script> <script type="text/ng-template" id="index3"> <ul> <li>选项31</li> <li>选项31</li> <li>选项31</li> </ul> </script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script> var app=angular.module("mk",['ngRoute']); app.controller("test",function($scope){ $scope.arr=[ {name:"选项1",href:"#/index1" }, {name:"选项2",href:"#/index2" }, {name:"选项3",href:"#/index3" } ]; $scope.arr[0].ischecked=true; $scope.dj=function(index){ angular.forEach($scope.arr,function(value,key){ value.ischecked=false; }); $scope.arr[index].ischecked=true; } }); app.config(function($routeProvider){ $routeProvider.when('/index1',{ templateUrl:"index1" }).when('/index2',{ templateUrl:"index2" }).when('/index3',{ templateUrl:"index3" }).otherwise( {redirectTo:'/index1'} ) }) </script> </head> <body ng-controller="test"> <ul id="ul"> <li ng-repeat="item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}"><a ng-href="{{item.href}}">{{item.name}}</a></li> </ul> <div ng-view> </div> </body> </html>
我感觉第二种方法要更简单点，你们怎么看。