angularui 自定义选项卡
ng-include 选取ng-template
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>tabs</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .active{display:block;} .sec{background:red;} .tabpanel{display: none;} .head{} .head .tul{list-style:none;padding:0;} .head .tul .tli{float:left;padding:10px 20px;} .head .tul .tli .ta{text-decoration: none; color:#000;display:block;} </style> <script> angular.module('myApp',[]).controller("tabsCtrl",function($scope){ $scope.tabs=[{head:'选项卡1',content:'list.html',active:true},{head:'选项卡2',content:'选项卡2的内容',active:false},{head:'选项卡3',content:'选项卡3的内容',active:false}]; $scope.changeTab=function($index){ for(var i=0;i<$scope.tabs.length;i++) { $scope.tabs[i].active=false; } $scope.tabs[$index].active=true; }; $scope.items=['hehehehe','shishi','uiuiui'] }) </script> </head> <body> <div ng-controller="tabsCtrl"> <div class="head"> <ul class="tul clearfix"> <li class="tli" ng-repeat="tab in tabs"><a href="javascript:;" class="ta" ng-class="{sec:tab.active}" ng-click="changeTab($index)">{{tab.head}}</a></li> </ul> </div> <div class="tab-content"> <div class="tabpanel" ng-repeat="tab in tabs" ng-class="{active:tab.active}" ng-include="tab.content"></div> </div> </div> <script type="text/ng-template" id='list.html'> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </script> </body> </html>
